如何在Twitter Bootstrap中垂直对齐媒体内容？

Question

我希望media-body内容垂直对齐'中间'.

这是标记:

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    I'd like this text to be vertically aligned 'middle'
  </div>
</div>

我尝试了以下不起作用:

.media-body {
  vertical-align: middle;
}

知道我怎么能这样做吗？

Answer 1

从Bootstrap v3.3.0开始,通过添加CSS类可以垂直对齐media-object和.media-bodymedia-middle

例如:

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body media-middle">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

请参阅:http://getbootstrap.com/components/#media

顺便提一下,文档目前还没有明确表示这也适用于此media-body.确实如此,因为所有的media-middle确实是一个加vertical-align: middle;风格的元素,并且media-body已经有风格display: table-cell(一样media-left和media-right).

Answer 2

Bootply： http: //www.bootply.com/122430

HTML：

<div class="media">
  <a class="" href="#">
    <img class="media-object custom-media" src="..." alt="..." height="500px" width="500px">
  </a>
  <div class="media-body">
    I'd like this text to be vertically aligned 'middle'
  </div>
</div>

CSS：

.custom-media, .media-body{
  display:inline;
}