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

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

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/ Я создал скрипку, а

Ответ 1

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

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

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

(vertical-align и display:table-cell перейдите к родительскому элементу, и вам понадобится таблица обертки)

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

Ответ 2

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

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, но это будет другой подход.

Ответ 3

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

display: block
margin: 0 auto

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

float: right

Спасибо, G

Ответ 4

Вы можете попробовать, добавив → line-height: 200px; в разделе стиля span, я думаю, что это может сработать;