центр диапазона в пункте вертикально

Question

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

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

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

Спасибо

Answer 1

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; 
} 

Answer 2

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

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