如何垂直对齐div的文本和图像中间？ [复制]
Posted
技术标签:
【中文标题】如何垂直对齐div的文本和图像中间？ [复制]【英文标题】：How to vertically align both text and image middle of div? [duplicate] 【发布时间】：2016-11-08 03:01:26 【问题描述】：这是我博客徽标的一部分。我在 div 中有徽标图像和文本。现在，图像居中对齐，但文本不在 div 的中间。如何在不使用边距的情况下做到这一点？ 这是我的代码：
<head>
<style type="text/css">
#titleimage
background: red;
display: inline-block;
#titleimage a
text-decoration: none;
#titleimage img
width: 33px;
height: 36px;
vertical-align: middle;
#titleimage span
color: white;
font-family: sans-serif;
font-size: 26px;
</style>
</head>
<body>
<div id="titleimage">
<a href="#">
<img src="images/vk8.png" /><span>PORTFOLIO</span>
</a>
</div>
</body>【问题讨论】：
【参考方案1】：您可以将vertical-align:middle 添加到您的#titleimage span
#titleimage
background: red;
display: inline-block;
#titleimage a
text-decoration: none;
#titleimage img
width: 33px;
height: 36px;
vertical-align: middle;
#titleimage span
color: white;
font-family: sans-serif;
font-size: 26px;
vertical-align:middle;
【讨论】：
谢谢。这真是一个愚蠢的问题:( 没问题，很高兴能为您提供帮助:)【参考方案2】：只需将vertical-align 添加到您的span 标签即可。
#titleimage span
color: white;
font-family: sans-serif;
font-size: 26px;
vertical-align:middle;/*add this*/
【讨论】：
太简单了:(我都没试过。 @VikasKumar 实际上，没问题。继续努力。【参考方案3】：添加#titleimage span vertical-align: middle; 并删除#titleimage img vertical-align: middle;
【讨论】：
该死的，我迟到了 38 秒。很好的快速和好的答案:) @Relisora 谢谢...以上是关于如何垂直对齐div的文本和图像中间？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章