How to vertically align the contents of a media body in Twitter Bootstrap?

Question

I would like the content to media-bodybe aligned vertically "medium".

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 tried the following which does not work:

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

Any idea how I can do this?

Answer 1

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

Answer 2

Starting with Bootstrap v3.3.0, you can vertically align both media-object, and media-bodyby adding a CSS class media-middle.

For instance:

<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

, , media-body. , media-middle vertical-align: middle; , media-body display: table-cell ( media-left media-right).

Answer 3

Trying to add these bootstrap classes

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