Question

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

编辑：对不起，伙计们，我应该澄清一下，我想要图像的正确文本，文本的中心和图像的中心垂直对齐

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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%);

Answer 2

您可以使 p 相对，并使文字内容绝对。希望它能帮到你

＆＃13;

p.social-popout {
position: relative;
  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.social-popout span{
position: absolute;
top: 50%;
left: 50%;    
transform: translate(-50%);
line-height: 0;
color: #f70000;
font-size: 20px;
font-weight: bold;
}

＆＃13;

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

＆＃13;

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

2 个答案: