如何在div中垂直对齐文本和图像？

Question

如何在div中垂直对齐文本和图像？

3

这是我的博客标志的一部分。我在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>

- user5773634

3个回答

1

只需在您的标签中添加vertical-align即可，保留HTML。

 #titleimage span{
        color: white;
        font-family: sans-serif;
        font-size: 26px;
        vertical-align:middle;/*add this*/
    }

- frnt

这太容易了 :( 我甚至都没有尝试。 - user5773634

@VikasKumar 没问题，继续努力。 - frnt

0

添加 #titleimage span { vertical-align: middle; } 并移除 #titleimage img { vertical-align: middle; }

- vignesh

我晚了38秒。回答很快，也很好！ - Relisora

@Relisora 谢谢您... - vignesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Relisora · Accepted Answer

你可以在你的#titleimage span中添加vertical-align:middle。

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