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

Я пытаюсь использовать 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/ Я также создал скрипку


vertical-alignment css css-tables
person Elaine Marley    schedule 14.12.2013    source источник
comment
Зачем тебе display:table-cell?   -  person greenish    schedule 14.12.2013

Ответы (4)


arrow_upward
24
arrow_downward

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

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

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

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

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

person nice ass    schedule 14.12.2013
comment
В вашем примере свойство vertical-align: middle не требуется для дочерних элементов img и span. Остальной части CSS достаточно, и объяснение хорошее. - person Marc Audet; 14.12.2013
comment
Я вижу, таблицы сами по себе не нужны, но я успешно использовал их с текстом. Мое изображение адаптивно, поэтому я не знаю ширину или высоту, чтобы можно было центрировать через position: absolute, например - person Elaine Marley; 14.12.2013
comment
@Elaine: попробуйте это решение. Он у меня в избранном, и я использую его каждый раз, когда хочу вертикально выровнять элемент с переменной высотой. - person nice ass; 14.12.2013
comment
@onetrickpony: Как я могу вертикально центрировать сам div вместо его содержимого (когда его высота устанавливается его содержимым, а не вручную)? - person user2284570; 20.10.2014
comment
@ user2284570 см. css-tricks.com/centering-in-the-unknown или ссылку на ответ, который я опубликовал выше - person nice ass; 24.10.2014

arrow_upward
4
arrow_downward

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

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

person Marc Audet    schedule 14.12.2013

arrow_upward
0
arrow_downward

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

display: block
margin: 0 auto

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

float: right

Спасибо, G

person Gregg Od    schedule 16.01.2017

arrow_upward
-2
arrow_downward

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

person dpuertas    schedule 14.12.2013