сделать два последовательных <div> в центре контейнера

Question

сделать два последовательных <div> в центре контейнера

0

у меня есть

<div id="container">
     <div id="div2">Title</div>                
     <div id="div3">text text</div>
</div>

где

#container {
    height:500px;
    width:100%;
    text-align: center;
}

#div2, #div3 {
   width: 50%;
}

есть ли все равно, чтобы оба div2 и div3 находились в центре # контейнера (по горизонтали и по вертикали), причем их высота была переменной?

tafteh 04 янв. 2014, в 22:34

Источник

0

Вы хотите, чтобы div2 был выше div3 (т.е. элементов блока), или вы хотите, чтобы они появлялись рядом друг с другом - встроенными?
Danield 04 янв. 2014, в 21:26
0

Привет, Данилд, div2 будет выше div3, и у них обоих одинаковая ширина.
tafteh 04 янв. 2014, в 22:06

Теги:

html

css

center

3 ответа

0

Это можно сделать с помощью вашей текущей разметки с помощью flexbox.

FIDDLE (добавленные префиксы поставщика для старых браузеров в скрипке)

CSS

#container {
    height:500px;
    text-align: center;
    background: pink;
    display: flex;
    align-items: center; /* horizontal center */
    flex-direction: column;
    justify-content: center; /*vertical center */
}

#div2, #div3 {
   width: 50%;
    background: orange;
}

При этом было бы намного проще, если бы вы обернули элементы div2 и div3 в div, а затем попытались выровнять эту оболочку div.

Danield 04 янв. 2014, в 19:56

0

use float: left; и height: 100%;

JSFIDDLE

jmore009 04 янв. 2014, в 18:11

Ещё вопросы

Вы хотите, чтобы div2 был выше div3 (т.е. элементов блока), или вы хотите, чтобы они появлялись рядом друг с другом - встроенными?
Привет, Данилд, div2 будет выше div3, и у них обоих одинаковая ширина.

BuddhistBeast · Accepted Answer · 2014-01-04T19-43-00.000Z

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

ПРИМЕЧАНИЕ. Все следующие примеры JsFiddle были изменены, чтобы включить цвет, таким образом вы сможете полностью понять эффекты позиционирования.

Первый вариант: Floater

В принципе, этот вариант довольно прямолинейный, мы сохраняем все то же самое, за исключением добавления трех элементов display, vertical-align, and float. Это вызывает следующие CSS:

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    float:left;
    text-align:center;
    width: 50%;
    background-color:orange;

}

Я расскажу подробнее о том, почему мы использовали эти три метода за несколько минут.

Второй вариант: вставка

Я считаю, что это, вероятно, тот, который вам нужен, и все, что я добавил, - это margin, display, and vertical-align чего получается следующий код CSS:

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    margin: 0 auto;
    text-align:center;
    width: 50%;
    background-color:orange;

}

Итак, почему мы используем фанки, отображение табличных ячеек? Это простой трюк в сочетании с вертикальным выравниванием, чтобы позиционировать что-либо на внутренней стороне внешнего div, чтобы правильно позиционировать предметы в центре.

Разница между первым примером и вторым примером заключается в том, что поплавок будет поддерживать содержимое, всегда желающее оставаться на левой стороне div (по существу, не по центру), но некоторым людям нравится этот аспект.

Маржа - это простой трюк, чтобы убедиться, что вы можете центрировать что-то горизонтально. Я хочу отметить, что этот div будет расширяться только по мере расширения содержимого в div (то есть значения 100% -ной ширины). Поэтому, если у вас нет контента, тогда внешний div больше не существует, пока контент не будет помещен внутри внутреннего div. Поэтому не следует обескураживать, если ваш div выглядит как малая длина по ширине и длинная высота; чтобы лучше выразить это, вот пример.

Огромное спасибо Буддисту. Мне нравится второй подход, который имитирует вертикальное выравнивание ячейки таблицы (вроде).
Конечно :) Я рад, что это сработало для вас :) Удачи!