如何在Twitter Bootstrap中垂直对齐media-body内容？

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

有什么办法可以做到这一点吗？

- henrywright

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也是如此）。

- sevenpointsix

---

嗯，media-middle对于我的media-body无效。文本仍然停留在顶部。 - Anupam

对于Bootstrap V4+，它是align-self-center。 - Haytam

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

- BENARD Patrick

---

谢谢您。这个中间对齐的media-object也包括在内吗？我只需要media-body内容垂直居中。 - henrywright

@henrywright，在bootply中，您可以看到媒体主体位于媒体对象的中右侧对齐。 - BENARD Patrick

Answer 3

尝试添加这些Bootstrap类。

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

- Abhay Desai

---

这会水平对齐内容吗？我想要垂直对齐。 - henrywright

这里有一篇文章可能会对你有所帮助！http://css-tricks.com/centering-in-the-unknown/ - Abhay Desai