Выравнивание содержимого ДИВ вертикальный центр не работает

Я прочитал много ответов о вертикальной выравнивания содержимого в дивы, и пытался реализовать главный ответ, который я видел:Выравнивание содержимого ДИВ вертикальный центр не работает

.middle-col{ 
    vertical-align: middle; 
    display: table-cell; 

}

Но это не работает.

См. http://jsfiddle.net/aKybp/4/.

Поскольку она построена на базе начальной загрузки, вам нужно будет расширить влево результат HTML, чтобы увидеть Див

То, что я пытаюсь достичь - для выравнивания по вертикали центр содержимого средней колонки

источник

2013-09-22 Dejell

Просто наконечник, вместо того, чтобы копировать весь CSS бутстраповских к вашим скрипкам, вы можете включить его в качестве внешнего ресурса из http://www.bootstrapcdn.com/ – Itay

Ну, это сгущенное вертикально, так что нет пустое пространство, в котором он мог бы центрироваться. Если вы не ошиблись вертикально по горизонтали. –

@bootstrapcdn, что такое URL? – Dejell

Ваш средний столбец находился внутри другого контейнера, который не распространялся на всю высоту. Следующие настройки исправляют это (также элемент .middle-col был объединен со своим родителем).

jsFiddle Demo

.middle-col { 
    vertical-align: middle; 
} 
.row > .col-md-6, .row > .col-md-3 { 
    display: table-cell; 
    float: none; 
}

P.S - Селекторы Я использую здесь действительно общем, это желательно, чтобы вы сделать их более конкретными с помощью идентификаторов или что-то подобное.

источник

2013-09-22 14:57:32 Itay

Спасибо, хорошо выглядит, но что вы подразумеваете под своим комментарием? где я должен добавить конкретный идентификатор? – Dejell

Селектор, который я использовал ('.row> .col-md-6, .row> .col-md-3'), будет влиять на каждый элемент с классом' .col-md-3/6', который является прямым ребенка '.row' на вашем сайте. Я предполагаю, что вы хотите изменить это поведение только в этом конкретном контейнере, поэтому дайте контейнеру некоторый идентификатор и используйте его в CSS. – Itay

это хорошо для меня, так как у меня было бы много таких строк. – Dejell

Ваш контейнер div фактически «является» выравниванием текста по вертикали. Ваша проблема в том, что высота контейнера div не больше, чем содержимое текста, которое оно обертывает.

Для достижения вертикального центрирования текста относительно изображения вам необходимо установить высоту div-контейнера, например. 480px (высота изображения).

.middle-col { 
    vertical-align: middle; 
    display: table-cell; 
    height: 480px; 
}

источник

2013-09-22 14:56:04

Выравнивание содержимого ДИВ вертикальный центр не работает

ответ

Смежные вопросы