центральная часть абзаца по вертикали

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

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

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