Вертикальное выравнивание ячейки таблицы не работает с абсолютной позицией

http://jsfiddle.net/fQv97/

HTML

<div class="table-cell">
    My text, should be align middle
</div>

CSS

.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
    position: absolute;
}

Проблема

Текст должен быть размещен в середине моей «ячейки таблицы». Все работает, как и ожидалось, пока я не добавлю «position: absolute». Теперь он больше не может размещать мой контент посередине? Почему бы нет? Он по-прежнему знает мою высоту и ширину, потому что я установил их в своем CSS.

Любое умное обходное решение для этого?


vertical-alignment css css-tables
person Jens Törnell    schedule 17.01.2012    source источник

Ответы (3)


arrow_upward
40
arrow_downward

Все работает, как и ожидалось, пока я не добавлю «position: absolute». Теперь он больше не может размещать мой контент посередине? Почему бы нет?

position: absolute форсирует display: block, читайте номер два здесь.

Что касается обходного пути, я думаю, вам придется обернуть его в другой элемент:

<div class="table-cell-wrapper">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>

.table-cell-wrapper {
    position: absolute;
}
.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
}
person thirtydot    schedule 17.01.2012
comment
Мне пришлось настроить div-оболочку для отображения: таблица, чтобы заставить это работать - person DanV; 15.12.2014
comment
спс, мне очень помогает - person tsingroo; 03.08.2018

arrow_upward
3
arrow_downward

Есть несколько обходных путей, которые я обнаружил для этого, например, добавление хэша перед позицией:

#position: absolute;

Этот прием был найден здесь: Вертикальное центрирование в CSS

person Matt K    schedule 17.01.2012

arrow_upward
3
arrow_downward

вот решение:

<div style="position: absolute; /*your position*/">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>
person FlashTrava    schedule 17.01.2012