1

Столкнулся с такой проблемой.
В Twitter Bootstrap элемент не выравнивается вертикально (по центру) внутри блока.

Код HTML:

<div id="box">
    <p>выравниваемый элемент</p>
</div>

CSS:

#box {
height: 40px;
border: 1px solid #fff;
display: table-cell;
vertical-align: middle;
}

Без использования данного фреймворка, все работает корректно.

4 ответа 4

2

На мой взгляд самый лучший способ ставить display: table; родительскому элементу а элементу внутри display: table-cell; vertical-align: middle; . Вот и рабочий пример:

#parent {
  display: table;
  width:100%;
  background:#e0e0e0;
  height:60px;
}

#child {
    display: table-cell;
    vertical-align: middle;
    
    text-align:center;
}
<div id="parent">
    <div id="child">Content here</div>
</div>

1
  • 1
    Вы можете создать отличный ответ, приведя из этой статьи примеры решения проблемы, указанной в вопросе. Ссылку на материал можно привести, как источник. Ответы, содержащие только ссылку, через некоторое время могут превратиться в бесполезные за счёт изменения содержимого, доступного по этой ссылке. Более того, не все пользователи этого сайта в достаточной мере знакомы с английским языком, что уменьшает полезность вашего ответа 30 сен 2015 в 14:53
1

Проблема стара как мир и я сам от неё мучусь иногда. Поробуйте добавить line-height:40px;

1
  • Спасибо. Проблема решилась Padding'ом. Bootstrap все-равно их "проглатывает". line-height не вариант, так как при уменьшении экрана, отступы становятся слишком большими.
    – Astor
    18 сен 2012 в 11:38
0
.elem{
    display:flex
    align-items:center;
}
2
  • 1
    пожалуйста, постарайтесь писать чуть более развёрнутые ответы. 27 сен 2015 в 19:27
  • сами знаете кто в своих старых версиях (младше 11) не поймет это 20 мар 2017 в 14:18
0

vertical-align касается строки или ячейки таблицы (аналог – блок с "display: table-cell;"),

а не отступа её базовой линии внутри родительского блока

в bootstrap лучше всего:

     position: relative;
     top: 50%;

(не работает, если у родителя "display: table;")

2
  • Да вы некрофил друг мой :)
    – Bastiane
    7 окт 2014 в 16:22
  • не угадали: я любитель вечности...
    – Leagnus
    7 окт 2014 в 16:53

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.