Как выровнять 3 деления (слева / по центру / справа) внутри другого деления?

392

Я хочу, чтобы 3 div были выровнены внутри контейнера div, что-то вроде этого:

[[LEFT]       [CENTER]        [RIGHT]]

Контейнер div имеет ширину 100% (без заданной ширины), и центр div должен оставаться в центре после изменения размера контейнера.

Итак, я установил:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Но это становится:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Какие-нибудь советы?

html css flexbox alignment css-float Serg
источник

1

Если контейнер станет уже шириной 300 пикселей, это произойдет, если вы не установите свойство переполнения.

Inkedmn

Flexbox и Grid: jsfiddle.net/w0s4xmc0/12963

Манодж Кумар,

Просто к сведению - по @ комментарию inkedmn в, с кучей контента в каждой колонке , я не мог заставить их все правильно выровнять при любой ширине контейнера без overflow: hidden;на centerколонке. Затем в медиа-запросе для небольших устройств, когда все 3 столбца располагались по центру на странице друг над другом, мне понадобился overflow: hidden;средний ряд (который был правым столбцом на больших устройствах), в противном случае он не имел высоты и не располагался по центру по вертикали. между верхним и нижним рядом.

Крис Л

364

С этим CSS, поместите ваши div'ы так (плавающие в первую очередь):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS Вы также можете плавать направо, затем налево, затем в центр. Важно то, что поплавки идут перед «главной» центральной секцией.

PPS Вы часто хотите, чтобы последний был внутри #containerэтого фрагмента: он <div style="clear:both;"></div>будет вытянут #containerвертикально, чтобы вместить обе боковые поплавки, вместо того, чтобы брать его высоту только от #centerи, возможно, позволять сторонам выступать снизу.

dkamins
источник

Как бы вы это сделали, если бы контейнер не был на 100%? Я пытаюсь сделать что-то подобное здесь, я хотел бы, чтобы div оставался справа от контейнера, но он всплывает справа от страницы

Tiago

@Tiago: Поплавки должны оставаться ограниченными для div, если они внутри него. Проверьте ширину контейнера, установив его в border:solid. Если он равен 100%, поместите его в другой элемент div, чтобы разместить его внутри своей страницы.

Джеймс П.

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

Tapefreak

6

Этому ответу более шести лет. В 2016 году правильный ответ - flexbox.

1

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

Ниндзя, кодирование

128

Если вы не хотите изменять структуру HTML, вы можете сделать это, добавив text-align: center;элемент обертки и элемент display: inline-block;к центрированному элементу.

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

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Демонстрация в реальном времени: http://jsfiddle.net/CH9K8/

fruechtemuesli
источник

1

Это единственное решение, которое правильно изменяет размер окна, не складывая его слишком рано.

Джаред Сили

2

Это идеально, когда левый и правый размеры равны. В противном случае центр не центрируется.

Mortalis

127

Выравнивание трех делений по горизонтали с помощью Flexbox

Вот метод CSS3 для горизонтального выравнивания div внутри другого div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Развернуть фрагмент

jsFiddle

justify-contentСвойство принимает пять значений:

flex-start (дефолт)
flex-end
center
space-between
space-around

Во всех случаях три деления находятся на одной строке. Описание каждого значения см .: https://stackoverflow.com/a/33856609/3597276.

Преимущества flexbox:

минимальный код; очень эффективный
центрирование, как по вертикали, так и по горизонтали, просто и легко
столбцы одинаковой высоты просты и легки
несколько вариантов выравнивания гибких элементов
это отзывчиво
В отличие от плавающих элементов и таблиц, которые предлагают ограниченную емкость макетов, поскольку они никогда не предназначались для создания макетов, flexbox - это современная (CSS3) техника с широким спектром опций.

Чтобы узнать больше о посещении flexbox:

Методы выравнивания элементов Flex
Использование гибких блоков CSS ~ MDN
Полное руководство по Flexbox ~ CSS-хитрости
Что за Flexbox ?! ~ YouTube видео-учебник

Поддержка браузеров : Flexbox поддерживается всеми основными браузерами, кроме IE <10 . В некоторых последних версиях браузеров, таких как Safari 8 и IE10, требуются префиксы поставщиков . Для быстрого добавления префиксов используйте Autoprefixer . Подробнее в этом ответе .

Майкл Бенджамин
источник

7

Сгибать намного лучше, чем использовать поплавки.

Файзан Акрам Дар

1

Отличное объяснение здесь и в связанных постах! Заметка: использование элементов span в качестве элементов flex внутри контейнера div работает в firefox, но не работает в браузере на основе javafx (webview). Смена «span» на «div» работала в обоих случаях.

Ашок

Internet Explorer 10 и более ранние версии не поддерживают свойство justify-content

D.Snap

1

К сожалению, это работает только с элементами одинаковой ширины. Также см. Stackoverflow.com/questions/32551291/…

обрабатывать

Отлично, я опробовал все решения здесь, и это лучшее!

Нико Мюллер

22

Свойство Float фактически не используется для выравнивания текста.

Это свойство используется для добавления элемента вправо или влево или по центру.

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

Развернуть фрагмент

на float:leftвыходе будет[First][second][Third]

на float:rightвыходе будет[Third][Second][First]

Это означает, что свойство float => left добавит ваш следующий элемент слева от предыдущего, тот же случай с правым

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

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

Развернуть фрагмент

[Первая секунда]

[В третьих]

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

Раджив Пингале
источник

13

Мне нравятся мои бары плотно и динамично. Это для CSS 3 и HTML 5

Во-первых, ограничение ширины на 100 пикселей ограничено. Не делай этого.
Во-вторых, установка ширины контейнера на 100% будет работать нормально, пока мы не говорили о том, что это панель заголовка / нижнего колонтитула для всего приложения, например панель навигации или панель кредитов / авторских прав. Используйте right: 0;вместо этого для этого сценария.
Вы используете id (hash #container, #leftи т. Д.) Вместо классов ( .container, .leftи т. Д.), Что хорошо, если только вы не хотите повторить свой шаблон стиля где-нибудь в вашем коде. Я бы рассмотрел использование классов вместо этого.
Для HTML нет необходимости менять порядок для: слева, по центру и справа. display: inline-block;исправляет это, возвращая ваш код к чему-то более чистому и логически в порядке снова.
Наконец, вам нужно очистить все поплавки, чтобы они не мешали будущему <div>. Вы делаете это сclear: both;

Обобщить:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Бонусный балл при использовании HAML и SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

Эрик Ванчич
источник

12

Есть несколько приемов, доступных для выравнивания элементов.

01. Использование Table Trick

Показать фрагмент кода

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Развернуть фрагмент

02. Использование Flex Trick

Показать фрагмент кода

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Развернуть фрагмент

03. Использование Float Trick

Показать фрагмент кода

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Развернуть фрагмент

Сантош Халсе
источник

11

Это может быть легко сделано с помощью CSS3 Flexbox, функции, которая будет использоваться в будущем (когда <IE9он полностью умрет) практически каждым браузером.

Проверьте таблицу совместимости браузера

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Вывод:

Показать фрагмент кода

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Развернуть фрагмент

Манодж Кумар
источник

4

С помощью твиттера:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

Ka.
источник

3

Возможный ответ, если вы хотите сохранить порядок HTML и не использовать flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Код Pen Ссылка

Прутви П
источник

2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; дает идеальное выравнивание по центру.

JSFiddle Demo

Халид Фархан
источник

Он только центрирует div в вашем примере, потому что текстовые элементы имеют почти одинаковый размер, делают один текст длиннее, а div #center больше не в центре: jsfiddle.net/3a4Lx239

Кай Ноак,

1

Я сделал еще одну попытку, чтобы упростить это и достичь этого без необходимости контейнера.

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Вы можете увидеть это вживую на JSFiddle

user15100
источник

1

Используя Bootstrap 3, я создаю 3 элемента одинаковой ширины (в 12 столбцах по 4 столбца для каждого элемента). Таким образом, вы можете сохранить центральную зону по центру, даже если левая / правая части имеют разную ширину (если они не переполняют пространство своих столбцов).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Чтобы создать эту структуру без библиотек, я скопировал некоторые правила из Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

Mortalis
источник

0

Вот изменения, которые мне пришлось внести в принятый ответ, когда я сделал это с изображением в качестве центрального элемента:

Убедитесь, что изображение заключено в div ( #centerв этом случае). Если это не так, вам придется установить displayзначение block, и оно, кажется, центрируется относительно пространства между плавающими элементами.

Убедитесь, что вы установили размер изображения и его контейнера:

#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

Сэм
источник

0

Вы можете попробовать это:

Ваш HTML-код, как это:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

и ваш код CSS, как это:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Итак, его вывод должен быть таким:

[[LEFT]       [CENTER]        [RIGHT]]

Кишан Рададия
источник

-1

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

Shubham
источник

2

Добро пожаловать в переполнение стека! Пожалуйста, добавьте некоторые объяснения того, почему этот код помогает OP. Это поможет дать ответ будущим зрителям. См. Как ответить для получения дополнительной информации.

Еретик Обезьяна

-3

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

overflow: auto;

в ваш контейнерный класс.

Мустафа ЗЕГАУЛА
источник

-6

Самым простым решением является создание таблицы с 3 столбцами и центрирование этой таблицы.

HTML:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

Стембизо Ф. Махатини
источник

-10

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

байтов
источник

2

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

Мартин Питерс

Как выровнять 3 деления (слева / по центру / справа) внутри другого деления?

Ответы:

Выравнивание трех делений по горизонтали с помощью Flexbox

jsFiddle