I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could stylize them to look like "h2" and "p" elements, but I cannot figure out how to place them on separate lines.
https://jsfiddle.net/aaunr9wr/4/
<div class="wrapper">
<div class="image-wrapper">
<img src="http://lorempixel.com/output/food-q-g-300-200-9.jpg">
</div>
<div class="text-wrapper">
<h2>Middle</h2>
<p>How is this aligned?</p>
</div>
</div>
.wrapper{
border:1px solid #f00;
width:90%;
margin:0 auto;
padding:1em;
}
.image-wrapper{
display:inline;
margin-right:1em;
vertical-align:middle;
}
.text-wrapper{
vertical-align:middle;
display:inline;
}
.text-wrapper p{
display:inline;
}
.text-wrapper h2{
display:inline;
}
img{
vertical-align:middle;
}
h2,p{
margin:0;
}
Can anyone guide me on how to solve this issue?