У меня есть плавающий контейнер с несколькими дочерними позициями: абсолютный / фиксированный . 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.
Сегодня я искал решение для моих трех элементов 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. Конечно, если у вас есть отступы и границы, вы должны учесть их в формуле.