центральный промежуток в абзаце по вертикали

У меня есть что-то вроде этого:

<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>

Очевидно, как вы можете видеть здесь, я намерен центрировать диапазон внутри этого абзаца (как по горизонтали, так и по вертикали). Текст центрирован по горизонтали просто отлично, но почему вертикальное центрирование не работает? Что здесь не так?

Спасибо


vertical-alignment css centering
person user765368    schedule 15.03.2012    source источник

Ответы (2)


arrow_upward
6
arrow_downward

http://jsfiddle.net/gxArp/

Использование display:table; на p и display:table-cell; на span.

p{
    text-align:center;
    background-color:yellow;
    height:50px;
    width:100%;
    display:table;
}
span{
    display: table-cell;
    vertical-align: middle;
}
person Alex    schedule 15.03.2012

arrow_upward
0
arrow_downward

Вертикальное выравнивание выравнивает содержимое внутри строки. Это не эквивалент CSS для HTML-атрибута valign="middle". Это означает, что он выровнен по вертикали по сравнению с элементами непосредственно перед и после, а не по отношению к родительскому/дочернему элементу. Это означает, что это свойство может выравнивать текст внутри строки или внутри элемента td. Пожалуйста, проверьте эту ссылку http://phrogz.net/css/vertical-align/index.html о том, как добиться вертикального центрирования.

Надеюсь это поможет.

person MRSGT _GT    schedule 15.03.2012