Vertically align an image next to paragraph

Question

I'm trying to get an image that is usually shorter in height than the adjacent paragraph to vertically align in the middle and just can't do it

<div class="element">
    <img  src="http://dummyimage.com/75" />
    <p  class="text" >Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>Blah Blah<br/>
    </p>

Here's my css so far

.element{display:table;height:100%}
.text{display:table-cell;background:#CC0;padding:20px;}
.element img{display:table-cell;margin-right:10px;vertical-align:middle;}

And a jsfiddle http://jsfiddle.net/0krndsav/

Most other questions want the paragraph in the vertical middle of an image...

Any ideas?

Answer 1

Try this on your .element :

display: flex;
align-items: center;

Here is your jsFiddle, updated.

Answer 2

Use display: inline-block; for vertical-align.

CSS

img {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.content-holder {
  display: inline-block;
  vertical-align: middle;
}

HTML

<div class="church-admin-calendar-widget-item">
  <img width="75" height="60" src="http://dummyimage.com/75" />
  <div class="content-holder">
    <p  class="ca_event_detail" >
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
      Blah Blah<br/>
    </p>
  </div>
</div>

DEMO