Вертикально центрируйте несколько полей с CSS

Я должен центрировать вертикально несколько полей с различными высотами.

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

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

Изображение ниже показывает дизайн, постэто является окном браузера

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

19
задан SuperBiasedMan 25 August 2015 в 09:52
поделиться

2 ответа

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

5
ответ дан 30 November 2019 в 05:20
поделиться

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

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

встроенном блоке свойство В большинстве современных браузеров .

3
ответ дан 30 November 2019 в 05:20
поделиться