Вертикальное выравнивание по середине с ответной сеткой Bootstrap

У меня очень простая проблема с вертикальной серединой a span с помощью Bootstrap 2.3.2.

Требования:

  • Есть два столбца, левый столбец имеет фиксированную высоту 300 пикселей, потому что внутри есть изображение 300x300.

  • Правый столбец имеет текст и должен быть центрирован по левому столбцу.

  • Все это должно быть отзывчивым. Вот почему я использую отзывчивый образ.

  • Если второй столбец идет вниз, его высота должна соответствовать размеру текста. Это означает, что я не могу установить фиксированную высоту во втором столбце.

  • Нельзя использовать JS для решения этой проблемы.

HTML

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
        <img class="img-responsive" src="http://placehold.it/300x300"/>
    </div>
    <div class="span6 v-center">
        <div class="content">
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    </div>
  </div>
</div>

CSS

.v-center {
    display:table;
    border:2px solid gray;
    height:300px;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Мой код: http://jsfiddle.net/qhoc/F9ewn/1/

Вы можете видеть, что я сделал выше: я в основном устанавливаю второй столбец span как таблицу и middle таблицу-таблицу .content. Я скопировал этот метод здесь Как использовать вертикальное выравнивание в бутстрапе (с рабочим примером здесь http://jsfiddle.net/lharby/AJAhR/)

Моя задача немного отличается из-за требований выше. Любая идея о том, как заставить его работать? Спасибо.

ОТВЕТЫ

Ответ 1

Добавьте !important правило в display: table вашего класса .v-center.

.v-center {
    display:table !important;
    border:2px solid gray;
    height:300px;
}

Ваше свойство отображения переопределяется bootstrap на display: block.

Пример

Ответ 2

.row {
    letter-spacing: -.31em;
    word-spacing: -.43em;
}
.col-md-4 {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

Примечание:.col-md-4 может быть любым столбцом сетки, здесь просто пример.