Вертикальное выравнивание не работает (HTML5)

<body> 
    <div style="width:800px; height:500px; margin:0 auto; background-color: blue" > 
     <div style="vertical-align:middle;"><img src="sl1.jpg" width="50%"></div> 
    </div> 
</body>

Этот код не работает ... как выровнять изображение по вертикали?Вертикальное выравнивание не работает (HTML5)

источник

2013-05-12 jovanMeshkov

Возможный дубликат [Вертикальное центрирование div внутри другого div] (http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) – Gajus

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

Это решение не будет работать в IE6 & 7. Ваш безопасный путь для них. Но поскольку вы отметили свой вопрос с помощью CSS3 и HTML5, я думал, что вам все равно.

Ниже приведен пример

Испытано в:

FF3.5 FF4 Сафари 5 Chrome 11 IE9 HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

div.cn { 
    display: table-cell; 
    width: 500px; 
    height: 500px; 
    vertical-align: middle; 
    text-align: center; 
} 

div.inner { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    text-align: left; 
}

источник

2015-05-14 11:09:16 Daniele

Вертикальное выравнивание не работает (HTML5)

ответ

Смежные вопросы