it-swarm.com.ru

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

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

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

358
serg

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

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

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

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

338
dkamins

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

119
fruechtemuesli

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

101
Michael_B

Свойство 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>

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

[В третьих]

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

19
Rajiv Pingale

Мне нравятся мои бары плотно и динамично. Это для 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; }
}
13
Eric Wanchic

Есть несколько трюков для выравнивания элементов.

1. Использование 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>

2. Использование 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>

. Использование 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
Santosh Khalse

Это может быть легко сделано с помощью 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>
8
Manoj Kumar

С Twitter bootstrap:

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

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

3
Pruthvi P

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

2
Khalid Farhan

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

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

1
user15100

Используя Bootstrap я создаю 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

1
mortalis

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

Ваш 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]]
0
kishan Radadiya

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

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

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