Як вирівняти 3 диви (ліворуч / центр / праворуч) всередині іншого діва?

392

Я хочу, щоб 3 діви були вирівняні всередині контейнера, подібно до цього:

[[LEFT]       [CENTER]        [RIGHT]]

Див контейнера шириною 100% (без встановленої ширини), а центральний поділ повинен залишатися в центрі після зміни розміру контейнера.

Тому я встановив:

#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 
— серг
джерело
1
Якщо контейнер стає ширшим за 300 пікселів, це станеться, якщо ви не встановите властивість переповнення.
— inkedmn
Flexbox, а також Сітка: jsfiddle.net/w0s4xmc0/12963
— Кумар
Просто до відома - по @ коментарю inkedmn в, з купою контенту в кожному стовпчику , я не міг змусити їх все правильно вирівняти при будь-якій ширині контейнера без overflow: hidden;на centerколонці. Тоді в медіа-запиті для невеликих пристроїв, коли в мене були всі 3 стовпчики по центру на одній сторінці, мені потрібно було overflow: hidden;в середньому ряду (який був правильним стовпцем для великих пристроїв), інакше він не мав висоти і не був по центру вертикально між верхнім і нижнім рядом.
— Кріс Л

Відповіді:

364

За допомогою цього CSS поставте свої divs так (плаває спочатку):

<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і, можливо, дозволяючи сторонам виступати на дно.

— дкаміни
джерело
як би ви це зробили, якби контейнер не був на 100%? Я намагаюся щось подібне тут, я хотів би, щоб дів залишився праворуч від контейнера, але він пливе праворуч від сторінки
— Tiago
@Tiago: Поплавці повинні залишатися обмеженими на дів, якщо вони знаходяться всередині нього. Перевірте, яка ширина контейнера, встановивши його border:solid. Якщо він на 100%, тоді додайте його до іншого діва, щоб розмістити його всередині вашої сторінки.
— Джеймс П.
Крім того, - якщо ви ставите їх всередину змінного розміру контейнера, переконайтеся, що встановіть мінімальну ширину контейнера, щоб уникнути натискання правого плаваючого діва.
— Tapefreak
6
Цій відповіді більше шести років. У 2016 році правильна відповідь - флексбокс.
1
@torazaburo, можливо, є більше, ніж одна правильна відповідь, є багато способів досягти однієї точки, в цьому випадку я повинен використовувати це рішення, тому що рамка, яку я використовую, вже встановлює ліворуч і праворуч з поплавком на елементи, просто додавання центрального елемента в кінці ідеально для мене.
— Кодування Ninja
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/

— фрухтемуеслі
джерело
1
Це єдине рішення, яке правильно змінює ширину вікна, не згортаючись занадто рано.
— Джаред Сілі
2
Це ідеально, коли розміри Лівий і Правий рівні. Інакше Центр не зосереджений.
— mortalis
126

Вирівнювання трьох потоків горизонтально за допомогою Flexbox

Ось метод CSS3 для вирівнювання divs горизонтально всередині іншого 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 підтримується всіма основними браузерами, крім IE <10 . Деякі останні версії браузера, такі як Safari 8 та IE10, вимагають префіксів постачальника . Для швидкого способу додавання префіксів використовуйте Autoprefixer . Детальніше у цій відповіді .

— Майкл Бенджамін
джерело
7
Flex набагато краще, ніж використання поплавців.
— Faizan Akram Dar
1
Чудове пояснення тут і в пов’язаних дописах! Сторона: Використання елементів "span" як гнучких елементів у контейнері div працювало у firefox, але не працювало в браузері на базі javafx (веб-перегляд). Зміна "прольотів" на "діви" працювало в обох.
— Ашок
Internet Explorer 10 та більш ранні версії не підтримують властивість виправдання вмісту
— 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 => ліва властивість додасть ваш наступний елемент зліва від попереднього, той самий випадок з правою

Також потрібно враховувати ширину батьківського елемента, якщо сума ширини дочірніх елементів перевищує ширину батьківського елемента, то наступний елемент буде доданий у наступному рядку

 <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 (хеш #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. Використання настільного трюку

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

02. Використання Flex Trick

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

03. Використання поплавкового трюку

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

— Сантош Халсе
джерело
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>
— Ка.
джерело
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%);
}

Код ручки посилання

— Прутві П
джерело
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

— Халид Фархан
джерело
Він лише центрирує діл у вашому прикладі, тому що текстові елементи мають майже однаковий розмір, зробіть один текст довше, а div #center більше не знаходиться в центрі: jsfiddle.net/3a4Lx239
— Kai Noack
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

— користувач15100
джерело
1

Використовуючи Bootstrap 3, я створюю 3 діви однакової ширини (у 12 макетів стовпців по 4 стовпчики на кожен div). Таким чином ви можете тримати центральну зону в центрі, навіть якщо лівий / правий ділянки мають різну ширину (якщо вони не переповнюють простір своїх стовпців).

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. Переконайтеся, що зображення укладено в розділ ( #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
— шубхам
джерело
2
Ласкаво просимо до переповнення стека! Будь ласка, додайте пояснення, чому цей код допомагає ОП. Це допоможе надати відповідь, з якого майбутні глядачі можуть навчитися. Див. Як відповісти для отримання додаткової інформації.
— Єретична мавпа
-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
Замість того, щоб опублікувати лише блок коду, поясніть, чому цей код вирішує поставлену проблему. Без пояснення це не відповідь.
— Martijn Pieters
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.