Вертикально центрирующие элементы инлайн-блок с разной высотой

У меня есть страницы HTML, который содержит встроенный блок div с с переменной высотой (отмеченные .banner классов):Вертикально центрирующие элементы инлайн-блок с разной высотой

<html> 
<head> 
<body> 
<div id="container"> 
<div id="header" style="margin: 0; width: 100%"> 
<div> 
    <div class='banner'> ... </div> 
    <div class='banner'> ... </div> 
    <div class='banner'> ... </div> 
    </div> 

.banner { 
    display: inline-block; 
}

Они имеют разную ширину, и добавляются во время выполнения , Макет сайта выглядит уродливым, а баннеры не выравниваются по вертикали.

По непонятным причинам, div не начинается не с левого верхнего угла, но с пустым пространством сверху. Как вы выравниваете его и следующий баннер по вертикали (например, выравниваете их нижние строки)?

Я использую jQuery, jQueryUI и ASP.NET MVC2.

источник

2013-04-27 Andrus

.banner { 
display: inline-block; 
vertical-align:middle; 
}

источник

2013-04-27 13:22:06

Вертикально центрирующие элементы инлайн-блок с разной высотой

ответ

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