Вертикально выровнять текст

Question

У меня проблема с вертикальным выравниванием текста с помощью CSS. Я пробовал, наверное, все, но он просто не хочет работать. Вы можете увидеть мои демо jsfiddle демо здесь:

http://jsfiddle.net/zcU7M/7/

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

С помощью этого кода, он должен работать, но что-то не так.

Как это исправить? Заранее спасибо.

EDIT: Обновлено демо: http://jsfiddle.net/zcU7M/7/

Answer 1

Запись:

.section { 
    display: table-cell; 
    vertical-align:middle; 
} 

Updated Fiddle.

Answer 2

.section нуждается display: table-cell

.section { 
    height: 200px; 
    background:#ccc; 
    border-bottom: 1px solid #dcdcdc; 
    text-align: center; 
    vertical-align: middle; 
    display:table-cell; 
} 

display:table-cell - это то, что позволяет элементу иметь дочерние элементы по вертикали, поэтому он должен находиться на родительском объекте, чтобы иметь возможность выравнивания по вертикали.

Вот Working Demo.

Answer 3

Проблема заключается в том, что <p> -Tag просто добавляет некоторый запас внизу. Вы можете видеть это, когда проверяете с помощью firebug. Просто добавьте поле: 0 в ваш .section селектор р:

.section p { 
    font-size: 15px; 
    font-family: Arial; 
    font-style: italic; 
    margin: 0; 
} 

http://jsfiddle.net/zcU7M/22/

Answer 4

For a vertical paragraph align use that: 

p { 
     height:200px; 
     line-height:200px; 
     text-align:center; 
     vertical-align: middle; 
    } 

JSFiddle пример: Exemple

Answer 5

все заслуга владельца этой ссылке @Sebastian Экстрем Link, пожалуйста, перейдите сквозь это. См. Его в действии codepen, , прочитав выше статью, я также купил демо-версию fiddle.

С помощью всего лишь трех строк CSS (за исключением префиксов поставщиков) мы можем с помощью transform: translateY вертикально центрировать все, что захотим, даже если мы не знаем его высоты.

Преобразование свойства CSS обычно используется для вращающихся и масштабирующих элементов, но с его функцией translateY мы можем теперь вертикально выравнивать элементы. Обычно это должно быть сделано с абсолютным позиционированием или настройками строчных высотой, но они требуют, чтобы либо знать высоту элемента или работают только на тексте однострочного и т.д.

Таким образом, чтобы сделать это, мы пишем:

.element { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
} 

Это все, что вам нужно. Это метод, аналогичный методу абсолютной позиции, но с ростом, что нам не нужно устанавливать высоту элемента или свойства position на родительском. Он работает прямо из коробки, даже в IE9!

Чтобы сделать его еще более простым, мы можем записать это как примесь с его префиксы: