Как выровнять 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:

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

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

Поддержка браузеров : 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

  1. Во-первых, ограничение ширины на 100 пикселей ограничено. Не делай этого.

  2. Во-вторых, установка ширины контейнера на 100% будет работать нормально, пока мы не говорили о том, что это панель заголовка / нижнего колонтитула для всего приложения, например панель навигации или панель кредитов / авторских прав. Используйте right: 0;вместо этого для этого сценария.

  3. Вы используете id (hash #container, #leftи т. Д.) Вместо классов ( .container, .leftи т. Д.), Что хорошо, если только вы не хотите повторить свой шаблон стиля где-нибудь в вашем коде. Я бы рассмотрел использование классов вместо этого.

  4. Для HTML нет необходимости менять порядок для: слева, по центру и справа. display: inline-block;исправляет это, возвращая ваш код к чему-то более чистому и логически в порядке снова.

  5. Наконец, вам нужно очистить все поплавки, чтобы они не мешали будущему <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

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

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

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

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

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

— Сантош Халсе
источник
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 */
}

Вывод:

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

— Манодж Кумар
источник
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

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

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

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

    #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
Вместо того, чтобы только публиковать блок кода, пожалуйста, объясните, почему этот код решает поставленную проблему. Без объяснения это не ответ.
— Мартин Питерс
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.