Как вертикально центрировать текст в ячейке таблицы

Question

Из этого JSFiddle: http://jsfiddle.net/pbfsyqut/

То, что я хочу, чтобы отцентрировать текст, содержащий изображение внутри DIV в ячейке таблицы.

Я попытался добавить vertical align размаху, но он не работает:

.profile-navigation-bar-list span { 
    vertical-align:center; 
} 

как прийти, что вертикальное выравнивание не работает? как я могу сосредоточить текст?

Answer 1

Как image и span является inline-block элементом, inline-block элементов могут быть выровнены путем добавления vertical align к наибольшему элементу высоты

div { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 

 
div:first-child{ 
 
    vertical-align:middle; 
 
}

<div>test<br/>test<br/>test</div> 
 
<div>test</div>

В вашем примере вы добавили vertical-align для второго элемента, который является наименьшим, если вторым элементом была высота вашего vertical-align работал бы

div { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 
div:nth-child(2) { 
 
    vertical-align: middle; 
 
}

<div>test<br/>test<br/>test</div> 
 
<div>test</div>

второй элемент по величине

div { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 
div:nth-child(2) { 
 
    vertical-align: middle; 
 
}

<div>test</div> 
 
<div>test<br/>test<br/>test</div>

Answer 2

Я не уверен, о чем вы просите. Для центра div достаточно стандартно, просто добавьте text-align:center в родительский tr и он будет готов.

Теперь, если вы хотите центрировать только div и оставить изображение слева, пожалуйста, проверьте jFiddle.

Answer 3

.profile-navigation-bar-list span {line-height:25px;} 
img{float:left} 

Answer 4

Вы можете сделать все элементы внутри сНу вертикального выравнивания: средний

.profile-navigation-bar-list div > * { 
    vertical-align: middle; 
} 

Я также удаляю ненужные div.