Question

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

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

Answer 2

只需将vertical-align添加到您的span代码中。

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

Answer 3

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

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

3 个答案: