Вертикальное центрирование нескольких блоков с помощью CSS

Question

Мне нужно центрировать по вертикали несколько ящиков разной высоты.

Я не знаю высоту полей, поскольку они являются переменными текстами.

Как я могу сделать это с помощью CSS (без использования td и valign). Пробовал display: table-cell но похоже не совместимо с IE

На изображении ниже показан дизайн, в окне браузера

удалена мертвая ссылка ImageShack

Answer 1

Не так элегантно, но работает. Создать таблицу из одной ячейки. Только таблица имеет кросс-браузерное выравнивание по вертикали.

Answer 2

Предполагая, что вы хотите, чтобы ящики были фиксированной ширины, вы можете использовать разметку фолдинга

<div class="vcontainer">
    <span>1<br/>2</span>
    <span>1<br/>2<br/>3<br/>4</span>
    <span>1<br/>2<br/>3</span>
</div>

с этими стилями

.vcontainer {
    text-align: center;
}

.vcontainer span {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

Свойство inline-block работает в большинстве современных браузеров .