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

Question

I have an image in an h1 tag which is vertically aligned in the middle. It works well with a short sentence. However, when the sentence is on multiple lines, I'd like the image to be aligned in the middle of the entire sentence rather than just the first line. Is there anyway to do this without creating two columns?

 <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

You can achieve this with 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>

Note I wrapped your text with a span

Learn how to use flex here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Well if you absolutely don't want to create multiple columns then you could go with this pure css approach :

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/

My suggestion would be to go with an additional html element instead using a multi column approach if at all possible in your scenario.

Hope that helps.