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

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

359 голосов
/ 09 апреля 2010

Я хочу, чтобы 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]

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

Ответы [ 18 ]

338 голосов
/ 09 апреля 2010

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

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

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

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

119 голосов
/ 11 января 2013

Если вы не хотите изменять структуру 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/

103 голосов
/ 20 августа 2015

Выравнивание по горизонтали на три деления с помощью 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 </a>. В некоторых последних версиях браузеров, таких как Safari 8 и IE10, требуются префиксы поставщиков . Для быстрого добавления префиксов используйте Autoprefixer . Подробнее в этом ответе .

19 голосов
/ 12 ноября 2011

Свойство 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 голосов
/ 26 мая 2014

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

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

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

  3. Вы используете идентификаторы (хэш #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 голосов
/ 24 января 2017

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

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>
8 голосов
/ 15 августа 2015

Это легко сделать с помощью 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 голосов
/ 11 мая 2015

С помощью начальной загрузки Twitter: 

<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 голосов
/ 23 октября 2016

возможный ответ, если вы хотите сохранить порядок 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 Link

2 голосов
/ 15 августа 2015

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

Страница:
...