html - два - выравнивание div по горизонтали



Как горизонтально центрировать<div>? (20)

Выравнивание текста: центр

Применение text-align: center внутристрочное содержимое центрируется в строке строки. Однако, поскольку внутренний div имеет по умолчанию width: 100% вы должны установить определенную ширину или использовать одно из следующих:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Маржа: 0 авто

Использование margin: 0 auto - еще один вариант, и он более подходит для совместимости старых браузеров. Он работает вместе с display: table .

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flex ведет себя как элемент блока и выдает его содержимое в соответствии с моделью flexbox. Он работает с помощью justify-content: center .

Обратите внимание: Flexbox совместим с большинством браузеров, но не для всех. См. here полный и обновленный список совместимости браузеров.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

преобразование

transform: translate позволяет изменять координатное пространство модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Чтобы центрировать по горизонтали, требуется position: absolute и left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (Устаревший)

Тег <center> является альтернативой HTML- text-align: center . Он работает с более старыми браузерами и большинством новых, но это не считается хорошей практикой, поскольку эта функция obsolete и удалена из веб-стандартов.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

https://ffff65535.com

Как я могу горизонтально <div> внутри другого <div> с помощью CSS?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Центрирование только по горизонтали

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

Контейнер:

  • должен иметь text-align: center;

Поле содержимого:

  • должен иметь display: inline-block;

Демо-версия:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Смотрите также эту скрипку !

Центрирование как по горизонтали, так и по вертикали

По моему опыту, лучший способ центрировать коробку как по вертикали, так и по горизонтали - использовать дополнительный контейнер и применять следующие свойства:

Внешний контейнер:

  • должен иметь display: table;

Внутренний контейнер:

  • должен иметь display: table-cell;
  • должен иметь vertical-align: middle;
  • должен иметь text-align: center;

Поле содержимого:

  • должен иметь display: inline-block;

Демо-версия:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Смотрите также эту скрипку !


Flex имеет более 97% поддержки браузеров и может быть лучшим способом решить эти проблемы в нескольких строках:

#outer {
  display: flex;
  justify-content: center;
}

Вот что вы хотите в кратчайшие сроки.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Вы можете сделать что-то подобное

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Это также приведет к выравниванию #inner вертикали. Если вы не хотите, удалите свойства display и vertical-align ;


Для Firefox и Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Для Internet Explorer, Firefox и Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Свойство text-align: является обязательным для современных браузеров, но оно необходимо в режиме Quirks Internet Explorer для поддержки устаревших браузеров.


Если вы не хотите устанавливать фиксированную ширину и не хотите дополнительного поля, добавьте display: inline-block в свой элемент.

Ты можешь использовать:

#element {
    display: table;
    margin: 0 auto;
}

Если вы не хотите устанавливать фиксированную ширину на внутреннем div вы можете сделать что-то вроде этого:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Это делает внутренний div встроенным элементом, который может быть центрирован с text-align .


Лучшие подходы к CSS 3 .

Модель коробки:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

В соответствии с вашей практичностью вы также можете использовать свойства box-orient, box-flex, box-direction .

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Подробнее о центрировании дочерних элементов

И это объясняет, почему модель коробки лучше всего подходит :


Например, см. Эту ссылку и фрагмент ниже:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

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

HTML-контент выглядит так:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Затем посмотрите этот пример на скрипке .


Некоторые плакаты упоминали о том, как использовать CSS 3 для центра, используя display:box .

Этот синтаксис устарел и больше не должен использоваться. [См. Также этот пост] .

Так что просто для полноты здесь самый последний способ сосредоточиться в CSS 3 с помощью модуля гибкого размещения макетов .

Поэтому, если у вас есть простая разметка:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... и вы хотите центрировать свои элементы в поле, вот что вам нужно в родительском элементе (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Если вам нужно поддерживать старые браузеры, которые используют более старый синтаксис для flexbox here's это хорошее место для просмотра.


Ну, мне удалось найти решение, которое, возможно, будет соответствовать всем ситуациям, но использует JavaScript:

Вот структура:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

И вот фрагмент JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Если вы хотите использовать его в ответном подходе, вы можете добавить следующее:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Один из вариантов, который я нашел:

Все говорят:

margin: auto 0;

Но есть и другой вариант. Установите это свойство для родительского div. Он отлично работает в любое время:

text-align: center;

И посмотри, детка иди в центр.

И, наконец, CSS для вас:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

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


Предположим, что ваш div имеет ширину 200px :

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Убедитесь, что родительский элемент positioned то есть относительный, фиксированный, абсолютный или липкий.

Если вы не знаете ширины своего div, вы можете использовать transform:translateX(-50%); вместо отрицательного поля.

https://jsfiddle.net/gjvfxxdj/


Самый простой способ:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


Это мой ответ.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


Этот метод также отлично работает:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Для внутреннего <div> единственным условием является то, что его height и width не должны быть больше, чем у его контейнера.


Я создал этот example чтобы показать, как вертикально и горизонтально align .

Код в основном таков:

#outer {
  position: relative;
}

а также...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

и он останется в center даже когда вы измените размер экрана.






centering