Неверное выравнивание таблицы таблицы таблицы

Ответ 1

Я думаю, что table-cell должен иметь родительский элемент display:table.

Ответ 2

Вот как я это делаю:

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

HTML:

<div id="content">
    Content goes here
</div>

См

Пример вертикального центрирования

и

CSS: центрирование вещей.

Ответ 3

Вы можете вертикально выровнять плавающий элемент таким образом, который работает на IE 6+. Он также не нуждается в полной табличной разметке. Этот метод не совсем чист - включает в себя обертки, и есть несколько вещей, которые нужно знать, например. если у вас слишком много текста, вытягивающего контейнер, но это довольно хорошо.

Короткий ответ: Вам просто нужно применить display: table-cell к элементу внутри перемещаемого элемента (ячейки таблицы не плавают) и использовать резервную копию с position: absolute и top для старый IE.

Длинный ответ: Здесь jsfiddle, показывающий основы. Важный материал обобщен (с условным комментарием, добавляющим класс .old-ie):

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

Здесь jsfiddle, который намеренно выделяет незначительные ошибки с помощью этого метода. Обратите внимание, как:

• В браузерах стандартов контент, превышающий высоту элемента-обертки, перестает центрироваться и начинает спускаться по странице. Это не большая проблема (вероятно, выглядит лучше, чем ползание страницы), и ее можно избежать, избегая слишком большого содержимого (обратите внимание, что, если я не упустил что-то, методы переполнения, такие как overflow: auto;, не выглядят работа)
• В старом IE элемент содержимого не растягивается, чтобы заполнить доступное пространство - высота - это высота содержимого, а не контейнера.

Это довольно небольшие ограничения, но стоит осознавать.

Код и идея, адаптированные отсюда

Ответ 4

Элемент, созданный следующим образом, будет выровнен по вертикали до середины:

.content{
     position:relative;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     top:50%;
}

Однако родительский элемент должен иметь фиксированную высоту. Смотрите эту скрипту: https://jsfiddle.net/15d0qfdg/12/

Ответ 5

В моем случае я хотел центрировать в родительском контейнере с положением: absolute.

<div class="absolute-container">
    <div class="parent-container">
        <div class="centered-content">
            My content
        </div>
    </div>
</div>

Мне пришлось добавить некоторое позиционирование для верхнего, нижнего, левого и правого.

.absolute-container {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.parent-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

.centered-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

Ответ 6

Поскольку вы все еще используете float...

попробуйте удалить "float" и обернуть его с помощью display: table

пример:

<div style="display:table">
 <div style="display:table-cell;vertical-align:middle;text-align:center">
       Hai i'm center here Lol
 </div>
</div>

Ответ 7

см. этот бит: http://jsbin.com/yacom/2/edit

должен установить родительский элемент в

display:table-cell;
vertical-align:middle;
text-align:center;

Ответ 8

Когда-то плавает тормоз вертикального выравнивания, лучше избегать их.

Ответ 9

Задайте высоту для родительского элемента.

Ответ 10

Поплавьте его с помощью другой оболочки без использования display: table;, она работает:

<div style="float: right;">
   <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>