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

希望能有所幫助。