it-swarm.com.ru

Середина по вертикали с отображением ячейки таблицы, не работающей на изображениях

Я пытаюсь использовать вертикальное выравнивание: посередине макета для вертикального центрирования иногда текста, иногда изображений, но это работает только над текстом. Кто-нибудь может сказать мне, почему? 

HTML:

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS:

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ Я также создал скрипку

16
Elaine Marley

Поместите border: 1px solid black в свои теги img, span, затем проверьте оба элемента в браузере dev. приставка. Вы заметите, что диапазон по умолчанию равен 100% высоты его родителя, в то время как изображение имеет определенную высоту (высоту фактического изображения). 

Таким образом, вы на самом деле не выравниваете эти элементы по вертикали относительно div, вы просто выравниваете текст внутри элемента span относительно span :)

Если вы действительно хотите использовать таблицы для вертикального центрирования, вот правильный код: http://jsfiddle.net/WXLsY/

(vertical-align и display:table-cell идут к родителю, и вам нужна таблица-обертка для них)

Но есть и другие способы сделать это (у SO есть много ответов на этот вопрос, просто используйте поиск)

21
nice ass

Вот один из способов решения проблемы:

HTML:

<div>
    <span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div> 
    <span> text </span>
</div>

Поместите свой img в span, изображение является заменяемым элементом, оно не может содержать дочерний контент, поэтому вертикальное выравнивание не будет работать.

CSS:

div {
    width:200px;
    height:200px;
    background-color:red;
    display:table;
    margin:10px;
}
span {
    display:table-cell;
    vertical-align:middle;
}

См. Демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/Fz6Nj/

Есть несколько способов сделать это, вы также можете применить display: table-cell к родительскому элементу div, но это будет другой подход.

4
Marc Audet

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

display: block
margin: 0 auto

поле: 0 auto для выравнивания изображения по центру. Если вы хотите, чтобы изображение было выровнено по левому краю, не включайте его. Если вы хотите, чтобы изображение выровнено по правому краю, вы можете добавить:

float: right

Спасибо, G

0
Gregg Od