在多条H1标签线上对齐图像

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元素，而不是使用多列方法。

希望能有所帮助。