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

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

编辑：对不起，伙计们，我应该澄清一下，我希望文本位于图像的右侧，文本的中心和图像的中心垂直对齐

我用绝对位置把它放在了正确的位置。但是，如果我有多个图标使用同一个类，我该怎么办

p.social-popoout{
高度：48px；
宽度：48px；
利润率：10px；
浮动：左；
-webkit过渡：全部轻松0.5s；
-moz过渡：所有轻松0.5s；
-o型过渡：均为0.5s；
-ms过渡：全部缓解0.5s；
过渡：全部缓解0.5s；
浮动：左；
}
p、 社会大众化{
边界半径：50%；
利润率：8px；
宽度：100%；
盒影：0px 0px 4px 1px rgba（0,0,0,0.8）；
-webkit过渡：全部轻松0.5s；
-moz过渡：所有轻松0.5s；
-o型过渡：均为0.5s；
-ms过渡：全部缓解0.5s；
过渡：全部缓解0.5s；
浮动：左；
}
p、 社会流行图片：悬停{
边际：0px；
盒影：6px 6px 4px 4px rgba（0,0,0,0.3）；
浮动：左；
}

试试看

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

---

您可以使您的p是相对的，并使文本内容是相对的。 希望对你有帮助

p.social-popoout{
位置：相对位置；
高度：48px；
宽度：48px；
利润率：10px；
浮动：左；
-webkit过渡：全部轻松0.5s；
-moz过渡：所有轻松0.5s；
-o型过渡：均为0.5s；
-ms过渡：全部缓解0.5s；
过渡：全部缓解0.5s；
浮动：左；
}
p、 社会大众化{
边界半径：50%；
利润率：8px；
宽度：100%；
盒影：0px 0px 4px 1px rgba（0,0,0,0.8）；
-webkit过渡：全部轻松0.5s；
-moz过渡：所有轻松0.5s；
-o型过渡：均为0.5s；
-ms过渡：全部缓解0.5s；
过渡：全部缓解0.5s；
浮动：左；
}
p、 社会流行图片：悬停{
边际：0px；
盒影：6px 6px 4px 4px rgba（0,0,0,0.3）；
浮动：左；
}
p、 社会流行跨度{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%）；
线高：0；
颜色：#F7000；
字体大小：20px；
字体大小：粗体；
}

---

text

文本居中是否有问题，或者您有什么问题？要将文本添加到哪里？在p标签里面？在那之后？我试着将文本添加到图像的右侧，文本中心和图像中心垂直对齐