Question

我在h1标签中有一个图像，它在中间垂直对齐。它适用于短句。但是，当句子在多行上时，我希望图像在整个句子的中间而不是仅仅在第一行中对齐。反正有没有创建两列？

<h1><img src="https://images-na.ssl-images-amazon.com/images/I/4109Z2o0HuL._SX522_.jpg" height="35" style="padding-right:20px; vertical-align: middle;">Hello, how are you?</h1>
<h1><img src="https://images-na.ssl-images-amazon.com/images/I/4109Z2o0HuL._SX522_.jpg" height="35" style="padding-right:20px; vertical-align: middle;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h1>

Answer 1

您可以使用flex

实现此目的

https://jsfiddle.net/yc9umsop/

h1 {
  display: flex;
  align-items: center;
}

HTML

<h1>
   <img src="https://images-na.ssl-images-amazon.com/images/I/4109Z2o0HuL._SX522_.jpg" height="35" style="padding-right:20px; vertical-align: middle;">
   <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
</h1>

注意我用文本包裹你的文字

了解如何在此处使用flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

如果您绝对不想创建多个列，那么您可以采用这种纯粹的CSS方法：

h1{
  position:relative;
  padding-left:80px;
}

h1 img{
  position:absolute;
  left:5px;
  top:50%;
  margin-top:-17.5px; /* IMAGE HEIGHT DIVIDED BY 2 */
}

https://jsfiddle.net/cndj27q3/4/

我的建议是使用额外的html元素，而不是使用多列方法，如果在您的方案中尽可能使用。

希望有所帮助。

在多个H1标记行上对齐图像

2 个答案: