CSS вертикальный центр с динамическими div

Question

CSS вертикальный центр с динамическими div

0

У меня есть div, называемый контейнером, который я пытаюсь вертикально центрировать. Я настроен по вертикали, но теперь я добавляю divs к нему через jQuery, например:

$("#add").on("click", function () {
    $(".elements").append("<div class='element'>World</div>");
});

Вот JSFiddle: http://jsfiddle.net/CDk4E/

В чем проблема:

Если вы еще не добавили div, страница выглядит хорошо (она вертикально центрирована). Но если вы начнете добавлять div, div .element, содержащий "Hello", будет .element вверх. Но то, что я действительно хотел бы сделать, это сохранить его в оригинальном месте, а другие .element просто добавляются на дно.

EDIT: Кроме того, первый элемент всегда является фиксированным.

the_ 27 апр. 2014, в 19:03

Источник

0

первый элемент имеет фиксированную высоту?
web-tiki 27 апр. 2014, в 16:07
0

@ web-tiki, да, это так. Я поставлю это в моем вопросе
the_ 27 апр. 2014, в 16:15

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

первый элемент имеет фиксированную высоту?
@ web-tiki, да, это так. Я поставлю это в моем вопросе

marcineck · Accepted Answer · 2014-04-27T13-25-00.000Z

Попробуйте добавить отступы: 50%; к вашему.container

<style>
    html, body {
    height: 100%;
}
.wrapper {
    height: 100%;
    width: 500px;
    margin:0 auto;
    display: table;
}
.container {
    display: table-cell;
    height: 100%;
    padding-top:50%;
    border:1px red dashed;
    position:relative;
}

.element{
    background:purple;
    color:#FFF;
    width:100%;
    padding:10px;
}

</style>

Вот результат: http://jsfiddle.net/CDk4E/2/