如何垂直对齐div的文本和图像中间？ [复制]答案

【问题标题】：How to vertically align both text and image middle of div? [duplicate]如何垂直对齐div的文本和图像中间？ [复制]
【发布时间】：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>

【问题讨论】：

标签： html css

【解决方案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 谢谢...