How to vertically-align media-body content in Twitter Bootstrap?

Question

I'd like media-body content to be vertically aligned 'middle'.

Here is the markup:

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

I've tried the following which doesn't work:

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

Any idea how I can do this?

Answer 1

Since Bootstrap v3.3.0, it's possible to vertically align both the media-object and the media-body, by adding the CSS class media-middle.

For example:

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

See: http://getbootstrap.com/components/#media

Incidentally, the docs currently don't make it clear that this works for the media-body as well. It does, because all media-middle does is to add a vertical-align: middle; style to an element, and media-body already has the style display: table-cell (as does media-left and 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;
}