Вертикально центрируйте несколько ящиков с помощью CSS

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

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

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

На рисунке ниже показан дизайн, post-it - это окно браузера

Ответы

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

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

<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;
}