Как выровнять по центру div: Как выровнять по середине (horizontally/width) страницы

Выровнять див по центру дива

Приветствую вас, дорогие друзья!

Сегодня мы рассмотрим с вами еще один прием работы c CSS, а именно, как сделать выравнивание по центру

Навигация по статье:

Я хочу вам показать несколько способов выравнивания по центру

Выравнивание

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

HTML:

CSS:

Вот, что получилось:

Он имеет некоторые особенности:

1. Данное свойство работает только для блочных элементов. То есть для выравниваемого блока должен быть присвоен display:block; (обычно оно стоит у блока

Выравнивание

Следующий способ выравнивания по центру

Само по себе это свойство не сможет выровнять блок по центру. Но если задать его для родительского элемента, а дочерний элемент сделать строчным, то есть присвоить ему свойство display со значением inline, то мы сможем выровнять этот блок строго по центру.

HTML:

CSS:

Вот, что у нас получилось:

Выравнивание

Первые два варианта позволяют нам выровнять

1. Данное свойство работает только для табличных элементов. Соответственно выравниваемый элемент должен находиться в ячейке таблицы. Или же он должен находиться в родительском блоке, которому присвоено свойство display:table-cell;, а данный родительский блок должен находится в блоке со значением display:table;

HTML:

CSS:

Абсолютное выравнивание

Теперь, зная как выровнять

Для того, чтобы этого добиться, нам нужно присвоить блоку свойство margin со значением auto, и расположить его в блоке со CSS свойством display:table-cell;, как это было показано в предыдущем варианте.

HTML:

CSS:

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

К сожалению, очень часто нет возможности сделать родительский блок табличного типа. В этом случае мы можем воспользоваться свойством margin для выравнивания блока по горизонтали, и добиться его относительно идеального расположения по вертикали задав верхний и нижний отступ в процентах или vh.

Для этого нам нужно сделать

.m-align-block <
margin:10vh auto;
>

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

Во что получится:

Надеюсь, моя статья поможет вам разобраться с выравниванием

А на этом у меня сегодня все. До встречи в следующих статьях!

В таблицах есть свойство вертикального выравнивания valign. Как можно в дивах выравнивать содержимое по центру вертикально. При условии, что див внешний, и див внутреннис с содержимым не имеют постоянной высоты.

4 ответа 4

Если нужна поддержка IE ниже восьмой версии, то у внутреннего элемента добавьте:

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

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

Вариант 5. Flexbox.

Одним из самых простых и элегантных способов является использования flexbox. Он не требует лишних телодвижений, достаточно понятно описывает суть происходящего, обладает высокой гибкостью. Единственное, что стоит помнить при выборе данного способа — поддержка IE от 10-й версии включительно. caniuse.com/#feat=flexbox

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Как выровнять контент div по нижней границе

CSS позволяет выровнять контент <div> по нижней границе с помощью специальных методов. Можно также выровнять контент по верхней границе <div>, по левой или правой стороне нижней границы. Рассмотрим все возможные варианты. Следуйте приведенным ниже шагам.

Рассмотрим пример и попробуем вместе разобраться с каждой частью кода.

1. Создайте HTML¶

• Создайте <div> с классом “main”. Он включает три других div.
• Разместите тег <h3> в первом div, который имеет название класса “column1”, напишите в нем контент.
• Второй <div> имеет класс с названием “column2”.
• Третий <div> имеет id с названием “bottom”.

<body>
  <div>
    <div class=“column1”>
      <h3>W3docs</h3>
    </div>
    <div class=“column2”>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
    </div>
    <div>Нижний контент Div</div>
  </div>
</body>

2. Добавьте CSS¶

• Используйте свойства border, float, height, width, position для добавления стиля к классу «main». Свойство float указывает, с какой стороны контейнера должны находиться элементы. Свойство position указывает положение элемента в документе.
• Установите color для текста первого <div>. В этом примере мы использовали значение hex для color.
• Используйте свойство text-align для выравнивания внутреннего контента блочного элемента.
• Используйте свойства bottom и left. Свойство bottom указывает для элемента нижнее позиционирование вместе со свойством position. Свойство left указывает левое позиционирование элемента вместе со свойством position.

Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute).

.main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      left:0;                          
      }

Давайте соединим части кода и посмотрим, как он работает!

Результат нашего кода¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      left:0;                          
      } 
    </style>
  </head>
  <body>
    <div>
      <div>
        <h3>W3docs</h3>
      </div>
      <div>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div>Нижний контент Div</div>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где контент div выравнивается по правой стороне нижней границы.

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position:relative; 
      } 
      .column1 { 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2 { 
      text-align:center; 
      } 
      #bottom { 
      position:absolute;                  
      bottom:0;                          
      right:0;                          
      } 
    </style>
  </head>
  <body>
    <div>
      <div>
        <h3>W3docs</h3>
      </div>
      <div>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div>Нижний контент Div</div>
    </div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где контент div выравнивается по центру нижней границы.

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .main { 
      border: 1px solid #4287f5; 
      float: left; 
      height: 180px; 
      width: 500px; 
      position: relative; 
      } 
      .column1{ 
      color: #4287f5; 
      text-align:center; 
      } 
      .column2{ 
      text-align:center; 
      } 
      #bottom { 
      position: absolute;                  
      bottom:0;                          
      width:100%;
      text-align:center;
      color:#ffffff;
      background-color: blue;   
      padding:15px 0;                 
      } 
    </style>
  </head>
  <body>
    <div>
      <div>
        <h3>W3docs</h3>
      </div>
      <div>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
      <div>Нижний контент Div</div>
    </div>
  </body>
</html>

Попробуйте сами!

В этом примере мы задали 100% для width нижнего div.

Рассмотрим пример, где контент div выравнивается по центру с помощью flexbox. Flexbox — это одномерный макет, т.е. элементы расположены в виде строк или столбцов. В следующем примере мы использовали свойство flex-direction со значением «column». Свойство flex-direction указывает главную ось flex-контейнера и определяет порядок отображения флекс-элементов. Свойство justify-content выравнивает элементы, когда они не используют все доступное пространство по горизонтали. Значение «space-between» используется со свойством justify-content, когда доступно пространство между строками элементов.

Свойство justify-content должно быть использовано вместе со свойством display, которое имеет значение «flex». Для выравнивания элементов по вертикали используйте свойство align-items.

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      main {
      border: 1px solid blue;
      height: 150px;
      display: flex;                   
      flex-direction: column;          
      justify-content: space-between;  
      }
      h3 {
      margin: 0;
      }
    </style>
  </head>
  <body>
    <main>
      <h3>Header title</h3>
     Текст, выровненный по нижней границе
    </main>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример, где использовано CSS свойство align-items. Оно указывает выравнивание по умолчанию для флекс-элементов. Это похоже на свойство justify-content, но является его вертикальной версией.

Обратите внимание, что некоторые браузеры не поддерживают display:flex. Используйте приведенные ниже префиксы.

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

Заметьте, что для поддержки всеми браузерами мы используем расширения -Webkit- и -Moz- вместе со свойством align-items.

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      main {
      border: 1px solid green;
      background-color:green;
      color:#ffffff;
      padding:20px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 150px;
      flex-direction:column;
      }
      h3 {
      margin: 0;
      }
      p{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: 150px;
      -webkit-box-align: end;
      -webkit-align-items: flex-end;
      -ms-flex-align: end;
      align-items: flex-end;
      margin:0;
      }
    </style>
  </head>
  <body>
    <main>
      <h3>Header title</h3>
      <p>Текст, выровненный по нижней границе</p>
    </main>
  </body>
</html>

Попробуйте сами!

Давайте рассмотрим другой пример, где использовано свойство position. В нашем первом примере мы также использовали свойство position со значением «relative» для HTML-тега <main>, а значение «absolute» было использовано для нижнего div.

В этом примере мы используем свойство span>position со значением «fixed» для <div>. Свойство z-index указывает порядок элементов и потомков, или флекс-элементов по оси z.

Свойство z-index имеет эффект только на позиционированных элементах.

Пример¶

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      * {
      margin: 0;
      padding: 0;
      }
      main{
      position:relative;
      }
      div{
      background-color: yellow;
      height: 200px;
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 1;
      border-top: 2px solid gold;
      }
    </style>
  </head>
  <body>
    <main>
      <h3>This is the header
      </h3>
      <div>Текст, выровненный по нижней границе</div>
    </main>
  </body>
</html>

Попробуйте сами!

css — CSS: Как выровнять элемент списка по центру по левому краю текста?

Я пытаюсь выровнять список по центру в div, но текст остается выровненным.

Итак, я хочу, чтобы все маркеры были выровнены по вертикали (выровнены по левому краю), но весь список должен располагаться в центре, как показано в пункте моего примера ниже:

.container { width: 600px; padding: 2em; background: #eee; }
.align-center { text-align: center; }

<div>
  <p>Center Align Test</p>
  
  <ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Finally, the third and final element</li>
   </ul>
 
 </div>

1

JROB

6 Апр 2017 в 18:37

4 ответа

Лучший ответ

Сделайте ul элементом inline-block и отцентрируйте его. Затем выровняйте текст слева li.

.container {
  width: 600px;
  padding: 2em;
  background: #eee;
  text-align: center;
}

ul {
  display: inline-block;
  text-align: left;
}

.align-center {
  text-align: center;
}

<div>
  <p>Center Align Test</p>

  <ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Finally, the third and final element</li>
  </ul>

</div>

..или использовать Flexbox

.container {
  width: 600px;
  padding: 2em;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.align-center {
  text-align: center;
  width: 100%;
}

<div>
  <p>Center Align Test</p>

  <ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Finally, the third and final element</li>
  </ul>

</div>

7

Paulie_D
6 Апр 2017 в 15:55

Добавьте text-align: center; в контейнер, сделайте ul inline-block и дайте ul text-align: left;

.container { width: 600px; padding: 2em; background: #eee; text-align: center;}
.align-center { text-align: center; }
ul { display: inline-block;  text-align: left;}

<div>
  <p>Center Align Test</p>
  
  <ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Finally, the third and final element</li>
   </ul>
 
 </div>

0

Johannes
6 Апр 2017 в 15:47

Я бы предложил добавить text-align:center в контейнер div, чтобы ul был отцентрирован. Затем вам нужно применить display:inline-block к ul, чтобы он не занимал все горизонтальное пространство. Наконец, добавьте text-align:left к ul, чтобы center не наследовал от родителя, как требуется.

.container { width: 600px; padding: 2em; background: #eee; text-align:center}
.align-center { text-align: center; }
ul {display:inline-block; text-align:left}

<div>
  <p>Center Align Test</p>
  
  <ul>
    <li>First element</li>
    <li>Second element</li>
    <li>Finally, the third and final element</li>
   </ul>
 
 </div>

0

nvioli
6 Апр 2017 в 15:40

Просто используйте flex контейнер.

.flex-container
{
   display:flex;
   justify-content:center;
   text-align: left;
}

<div>
 <ul>
    <li>Left Aligned #1</li>
    <li>Left Aligned #2</li>
    <li>Left Aligned #3</li>
 </ul>
</div>

1

Christian Paul Decembrana
31 Июл 2018 в 02:14

как выровнять по центру sub div

Мне нужно, чтобы центр выровнять вложенный див внутри родительского элемента div без использования text-align:center / align:center;

В основном я попробовал следующий пример. Я понимаю, что для того, чтобы margin:auto работал, мне нужно указать ширину (не могу использовать auto) в sub div. Но как я могу это сделать, если ширина sub div варьируется от 0px до 500px?

смотрите пример:

<div>
    <div>
        hello world
    </div>
</div>

css

html

Поделиться

Источник

chrizonline    

02 мая 2011 в 06:19

3 ответа

• Выравнивание по центру div внутри div?

  Как выровнять по центру 3 плавающих дива внутри друг друга по центру страницы ? <div style=width:100%> <div style=width:90%> <div style=width:80%> //Content </div> </div> </div>

• Как выровнять div по центру даже при ширине 100%

  Я использую контейнер <div> и устанавливаю этот контейнер на 100%. внутри этого контейнера я уже упоминал несколько <div> с 50%, и он выравнивается по левой стороне. Теперь мой вопрос заключается в том, Могу ли я выровнять основной контейнер по центру, чтобы выровнять центр. Так что…

1

Используйте margin: auto , но для работы вам нужно указать ширину div (как вы это делаете).

Поделиться

Alex Emilov    

02 мая 2011 в 06:23

0

Вы правы, что можете использовать margin:auto; . Вы также можете использовать:

margin-left:auto; margin-right:auto;

Однако кажется, что ваш внутренний div больше, чем ваш внешний div. Если вы уменьшите внутренний div, он будет работать примерно так: http://jsfiddle.net/TpFwh/4/

Поделиться

ninjagecko    

02 мая 2011 в 06:34

-2

Для этого вы можете использовать тег center . После родительского тега div используйте центральный тег.

Поделиться

Ankit    

02 мая 2011 в 06:21

Похожие вопросы:

Как выровнять div по центру

Я получил код для вставки от Mail chimp, чтобы отобразить окно регистрации на рассылку новостей на моем сайте. Я пытаюсь выровнять по центру окно информационного бюллетеня, но не уверен, в какой div…

выровнять внутренний div по центру

У меня есть 2 div, внутренний div & внешний div. Как выровнять внутренний div по центру? Вот мой исходный код: <div class=menu> <a href=AdminHomePage.php?id=logout>Manage…

как выровнять изображение по центру div?

Я пытаюсь выровнять изображение в div по центру. Я пробовал следующее, Но это не работает. Пожалуйста, скажите мне, как это исправить . заранее спасибо. <div class=erabox><img…

Выравнивание по центру div внутри div?

Как выровнять по центру 3 плавающих дива внутри друг друга по центру страницы ? <div style=width:100%> <div style=width:90%> <div style=width:80%> //Content </div>…

Как выровнять div по центру даже при ширине 100%

Я использую контейнер <div> и устанавливаю этот контейнер на 100%. внутри этого контейнера я уже упоминал несколько <div> с 50%, и он выравнивается по левой стороне. Теперь мой вопрос…

Как выровнять текст по центру в div

Я хотел бы выровнять текст по центру как по вертикали, так и по горизонтали внутри этого div. Таким образом, он имеет равное заполнение сверху и снизу. Как мне это сделать с моим текущим кодом? мой…

Как выровнять div по центру без явного размера?

Я хочу выровнять div по центру страницы по горизонтали. Div содержит несколько html контента, таких как изображения, ссылки, тексты и т. д. Ради этого я не могу использовать display:table , который…

Как выровнять div по центру, соответствующему div под ним?

Как я могу выровнять img по центру в соответствии с текстом под ним? Обертка div выровнена по левому краю. <div class=wrapper> <div class=com-icon> <img src=images/IT.png alt=laptop…

Как выровнять изображение div по центру в проекте angularDart?

Я пытаюсь выровнять изображение по центру страницы, применил следующий код, но это не сработало. .home-banner { text-align: center; } .banner-image { display: inline-block; } Как я могу выровнять…

Нужно выровнять div по центру с помощью bootstrap

я пытаюсь выровнять по центру три дива с помощью bootstrap. у меня есть div с контейнером класса, и в нем есть три дива. я пытаюсь выровнять эти три дива по центру в браузере. я могу привести их к…

Div align center — Pretag

Для горизонтального центрирования блочного элемента (например,

 
   

      центрированный контент
   
  

 

   
 Привет, (в центре) Мир! 
 

 P {
   текст - выровнять: по центру
}
h3 {
   текст - выровнять: по центру
} 

 .center {
    граница: 5 пикселей сплошная # FFFF00; текст - выравнивание: по центру;
 } 

 




<стиль>
    .container {
        ширина: 80%;
        маржа: 0 авто;
        отступ: 20 пикселей;
        фон: # f0e68c;
    }



    

        
 Это заголовок 
        
 Это абзац. 
    

 

 tml>





подписываться


 

 





подписываться


 

 





 Подписаться 


 

 





 Подписаться 


 

  


    <стиль>
        .div1 {
          выравнивание текста: центр;
          граница: сплошной красный цвет 3px;
      }
  



    

      
 ЦЕНТРАЛЬНЫЙ ТЕКСТ 
  


  

  #inner {
  ширина: 50%;
  маржа: 0 авто;
}  

  


    





   

      
 Фу-фу