html - 如何在 p 类图像旁边垂直对齐文本

Question

我在 CSS 中有一个弹出图像，我已经将它实现到我的 html 中。我只想知道如何添加与图像中心垂直对齐的文本(在将其悬停之前)

编辑:对不起大家，我应该澄清一下，我想要图像右侧的文本，文本中心和图像中心垂直对齐

我已经设法使用绝对位置将其放置在正确的位置。但是，如果我有多个图标使用同一个类，我该怎么办？

p.social-popout {
  height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
	float: left;
}
p.social-popout img {
	border-radius: 50%;
	margin: 8px;
	width: 100%;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
	float: left;
}
p.social-popout img:hover {
	margin: 0px;
	box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
	float: left;
}

<p class="social-popout"><img src="http://bradsknutson.com/wp-content/themes/bradsknutson/images/facebook-48circle.png" /></p>

Answer 1

尝试一下

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

或使用

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);