如何在 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-middle 来垂直对齐 media-object 和 media-body。

例如：

<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

引导层：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;
}

Answer 3

尝试添加这个引导类

class="text-center"
class="pagination-centered"