vertical align a div next to another div

Question

I need to vertically align a div that has text that is next to a div that contains an image.

The content can have multiple lines in the title (if you see image).

Currently how the html is:

<div class="small-view">
    <div class="small-left">
       <img src="image.png" width="80">
    </div>
    <div class="small-right">
       <p class="post-title">This is a post</p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

I'd like to vertically align "small-right" to the image so it's centered based on the text within it. For some reason, everything I'm trying isn't working.

Answer 1

Make all your blocks (divs & p) displaying inline, and apply the vertical-align to your image:

<div class="small-view">
    <div class="small-left" style="display:inline;">
       <img src="image.png" width="80" style="vertical-align:middle">
    </div>
    <div class="small-right" style="display:inline;">
       <p class="post-title" style="display:inline;">This is a post</p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

Corresponding codepen

You can also use a single div:

<div class="small-view">
    <div class="small-left-and-right">
       <p class="post-title">
          <img src="image.png" width="80" style="vertical-align:middle">
          This is a post
       </p>
       <span class="post-info>January 5, 2015</span>
    </div>
</div>

Corresponding codepen