html - 垂直对齐段落旁边的图像

Question

我试图让一个通常比相邻段落高度短的图像在中间垂直对齐，但做不到

<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>

到目前为止，这是我的 CSS

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

还有一个 jsfiddle http://jsfiddle.net/0krndsav/

大多数其他问题都希望段落位于图像的垂直中间...

有什么想法吗？

Answer 1

将display: inline-block;用于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