Выровнять по центру плавающий div внутри плавающего контейнера

У меня есть плавающий контейнер с несколькими дочерними позициями: абсолютный / фиксированный . parentContainer { margin : 0 auto ; / * сохранить по центру страницы * / width : 100 %; / * растянуть на страницу * / max - ширина : 800 пикселей ; / * увеличить до 800px * / text - выровнять : по центру ; / * держать моих детей в центре * / } . childDiv { display : inline - block / * рассматривает меня как блок, который течет как текст * / ширина : 230 пикселей ; / * установить мой размер * / вертикальный - выровнять : верх ; / * держать меня в верхней части моего родителя, даже если мои братья и сестры выше меня * / } < div class = 'parentContainer' > < div class = 'childDiv' > Content 1 </ div > < div class = 'childDiv ' > Content 2 </ div > < div class = ' childDiv ' > Content 3 </ div > </ div > s.

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

Как я могу это сделать ?

За один раз только один из этих дочерних элементов виден в браузере. Пользователь нажимает кнопку «Предыдущий / следующий», чтобы просмотреть другие дочерние элементы (например, Карусель)

Очевидно, я сталкиваюсь с проблемами выравнивания по центру, если я использую float: left для дочернего элемента div.

html,css,css3,css-float,

3

Ответов: 4


3 принят

Вы не можете выровнять плавающий элемент относительно родительского элемента.

Свойство floatCSS извлекает элемент из его контекста в документе (аналогично float). В результате этого элемент не может быть расположен «в центре родительского элемента».


Сегодня я искал решение для моих трех элементов div в родительском контейнере, и я наткнулся на этот старый пост, где хорошее решение, похоже, не предлагалось.

Моя ситуация: у меня есть родительский контейнер с шириной: 100%, чтобы он помещался на экране. Я также установил максимальную ширину, чтобы родительский контейнер не становился слишком большим. На максимальной ширине я хочу, чтобы три дочерних элемента отображали все в одном ряду.

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

Решение состоит в том, чтобы не использовать float, который «вырывает элемент из его контекста», как действительно утверждает Роб У., а вместо этого использовать встроенные блоки:

.child {
    margin: 0 auto;
}

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

ура


Если вы показываете только одного ребенка divодновременно, вероятно, им это не нужно float. Лучший способ центрировать неплавающий блок внутри другого блока - назначить следующий стиль:

div.child

Это приведет к центру, divпотому что левые и правые поля будут одинаково соответствовать родительскому контейнеру. Точно так же вы можете выровнять divs влево и вправо:

.left {
    margin-right: auto;
}
.right {
    margin-left: auto;
}

Если у вас есть фиксированная ширина как для контейнера, так и для дочерних элементов, вы можете использовать margin-leftи margin-rightустановить значение (ширина контейнера контейнера - ширина ширины содержимого) / 2. Конечно, если у вас есть отступы и границы, вы должны учесть их в формуле.

HTML, CSS, CSS3, CSS-поплавок,
Похожие вопросы