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

Содержание

Выравнивание слоя по центру | htmlbook.ru

Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если
лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту
такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять
свои размеры в зависимости от настроек операционной системы, типа монитора, установленного
разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную
особенность и располагать элемент у края окна или по его центру.

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении
имеется несколько способов — с помощью отступов, через позиционирование,
а также используя атрибут align тега <div>.

Использование отступов

Если добавить отступ к слою слева с помощью свойства margin-left,
то визуально слой сместится на указанное значение вправо. Зная ширину слоя,
его можно сместить так, чтобы слой располагался по центру веб-страницы. Для
чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя
в процентах и полученное значение разделить пополам. Результат и будет значением
свойства margin-left (пример 1).

Пример 1. Использование margin-left

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    margin-left: 30%; /* Отступ слева */
    width: 40%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа
слева и справа (пример 2).

Пример 2. Использование отступов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
   <style type="text/css">
    #centerLayer {
     margin-left: 30%; /* Отступ слева */
     margin-right: 30%; /* Отступ справа */
     background: #fc0; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
    }
   </style>
  </head>
  <body>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
  </body>
</html>

В данном примере показано размещение слоя шириной 40% по центру.
Хотя сама ширина никак напрямую не задается, она определяется значением свойств
margin-left и margin-right. Они устанавливают отступ слева и справа,
чтобы слой располагался по середине, их значения должны быть равны.

Следующий способ более универсален и уже не зависит от того, какие единицы
измерения используются для установки ширины. Для этого требуется задать отступ слева и справа для слоя равным auto через стилевые свойства margin-left и margin-right или универсальное свойство margin (пример 3).

Пример 3. Применение значения auto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    width: 400px; /* Ширина слоя в пикселах */
    margin: 0 auto; /* Отступ слева и справа */
    background: #fc0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    text-align: left; /* Выравнивание содержимого слоя по левому краю */
   }
  </style>
 </head>
 <body>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
   </div>
  </body>
</html>

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

Атрибут align тега <div>

Еще один способ размещения по центру вообще не требует использования никаких
стилей и связан с атрибутом align тега <div>.
Указывая значение center, заставляем содержимое слоя выравниваться по его
центру. Поэтому необходимо создать два слоя, один из которых будет служить
контейнером для другого, как показано в примере 4.

Пример 4. Атрибут align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
    #centerLayer {
     width: 400px; /* Ширина слоя в пикселах */
     background: #fc0; /* Цвет фона */
     padding: 10px; /* Поля вокруг текста */
     text-align: left; /* Выравнивание по левому краю */
    }
   </style>
  </head>
  <body>
  <div align="center">
    <div>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
  </div>
 </body>
</html>

Опять же, как и в случае использования свойства text-align,
размещаться по центру будет и текст внутри слоя. Поэтому следует насильно
задать ему необходимое выравнивание через стили. Ширину слоя-контейнера задавать
не требуется, она будет вычисляться автоматически и занимать все доступное
пространство веб-страницы.

Абсолютное позиционирование
слоя

При абсолютном позиционировании координаты слоя вычисляются относительно
левого верхнего угла окна родительского элемента или браузера, если родителя нет. Слой, заданный с абсолютным позиционированием, может
располагаться под основным текстом или, наоборот, поверх него. Положение
определяется с помощью стилевого свойства z-index и позволяет гибко управлять
положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице
различные подсказки, всплывающие окна, рекламу или плавающие меню.

Вначале следует указать ширину и высоту слоя с помощью width и
height. Размеры можно задавать в пикселах, процентах или других единицах.
Ширину, например, можно определить в процентах, а высоту в пикселах. Из-за
этой особенности предлагаемый метод размещения по центру является наиболее
универсальным.

Следующий шаг — задаем абсолютное позиционирование слоя через
position: absolute. Положение слоя следует определить как 50% по горизонтали
и вертикали с помощью свойств left и top. Эти значения остаются неизменными,
независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного
выравнивания следует добавить свойства margin-left и margin-top с отрицательными
значениями. Их величина должна быть равна половине ширины слоя (для margin-left)
и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включен overflow: auto,
он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом
остается неизменной (пример 5).

Пример 5. Ширина слоя в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   #centerLayer {
    position: absolute;	/* Абсолютное позиционирование */
    width: 400px; /* Ширина слоя в пикселах */
    height: 300px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -211px; /* Отступ слева, включает padding и border */
    margin-top: -150px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }
  </style>
 </head>
 <body>
   <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
 </body>
</html>

В случае использования процентной записи стиль меняется незначительно, надо
так же поделить ширину и высоту пополам и добавить полученные значения в
качестве аргументов к свойствам margin-left и margin-top (пример 6). При этом надо учитывать, что видимая ширина элемента складывается из значений width, padding и border.

Пример 6. Ширина слоя в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
   <style type="text/css">
    #centerLayer {
     position: absolute; /* Абсолютное позиционирование */
     width: 40%; /* Ширина слоя в процентах */
     height: 30%; /* Высота слоя в процентах */
     left: 50%; /* Положение слоя от левого края */
     top: 50%; /* Положение слоя от верхнего края */
     margin-left: -20%; /* Отступ слева */
     margin-top: -15%; /* Отступ сверху */
     background: #fc0; /* Цвет фона */
    }
   </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
      euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
 </body>
</html>

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется
установить значение одного из параметров в процентах, соответственно, поменяется
и запись другого параметра. Как показано в данном примере, ширина слоя установлена
в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, 20%.

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

CSS: выравнивание по центру

Центрирование

Общая функция CSS — центрирование текста или изображения.
Фактически, существует три вида центрирования:

В последних реализациях CSS вы можете также использовать
возможности Уровня 3 (CSS3), позволяющие выровнять по центру
абсолютно позиционированные элементы:

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования
— это центрирование строк текста в абзаце или заголовке. Для этого
CSS обладает свойством ‘text-align’:

P { text-align: center }
h3 { text-align: center }

которое отображает каждую строку в абзаце P или заголовке h3 по
центру между полями, вот так:

Все строки в этом абзаце выровнены
по центру полями абзаца. Это стало возможным благодаря значению
‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или,
по-другому говоря: мы хотим, чтобы правое и левое поля были
одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно
используется для блоков с фиксированной шириной, потому что если
блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот
пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P>Этот довольно ...

Этот довольно узкий блок текста центрирован.
Заметьте, что строки внутри блока не центрированы (они выровнены
влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования
изображения: поместите его в собственный блок и примените свойства
полей. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG src="..." alt="...">

Следующее изображение центрировано:

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования.
Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при
помощи комбинирования нескольких свойств. Хитрость заключается в
том, чтобы указать, что внешний блок должен быть отформатирован как
ячейка таблицы, т.к. содержимое ячейки таблицы может
быть выровнено по центру вертикально.

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV>
  <P>Этот маленький абзац...
</DIV>

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным
(position: relative), что превратит его в контейнер для абсолютно
позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным
(position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’.
(Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на
половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

div.container5 {
  height: 10em;
  display: flex;
  align-items: center }
div.container5 p {
  margin: 0 }

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали
и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в
том, что абзац становится ровно таким широким, каким он должен быть
(если только мы явно не укажем ширину). В примере ниже мы именно
этого и хотим: мы размещаем по центру абзац из одного слова
(“Центр!“), так что ширина абзаца должна быть равна ширине этого
слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той
же ширины, что и его содержимое. Мы подразумеваем, что разметка
осталась прежней:

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с
таблицей из предыдущего примера. Но теперь мы ещё перемещаем
элемент на полпути через контейнер с помощью правила ‘left: 50%’ и
одновременно сдвигаем его влево на половину своей собственной
ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило
‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё
легче:

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

т.е. единственным дополнением является ‘justify-content:
center’. Точно также, как ‘align-items’ определяет вертикальное
выравнивание содержимого контейнера, ‘justify-content’ таким же
образом определяет горизонтальное выравнивание. (На самом деле всё
несколько сложнее, как следует из их названий, но в простом случае,
работает это именно так.). Побочный эффект от применения свойства
‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р,
автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных
элементов является область просмотра. (В случае c браузером это
окно браузера). Таким образом, центрирование элемента в области
просмотра не вызывает сложности. Далее приведен полный пример. (В
этом примере использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

Вы можете увидеть результат в отдельном
документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на
50%. Поэтому визуализатор постарается сделать линии длиною не более
половины ширины контейнера. Указав на то, что правое поле элемента
находится правее на ту же самую величину, отметим, что максимальная
длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое
предложение находится на одной строке, когда окно достаточно
широкое. Только тогда, когда окно слишком узкое для всего
предложения, это предложение будет разбито на несколько строк.
Когда вы удалите правило ‘margin-right: -50%’ и снова измените
размер окна, вы заметите, что предложения будут уже разбиты, хотя
окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области
просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

CSS: выравнивание по центру

Центрирование

Общая функция CSS — центрирование текста или изображения. Фактически, существует три вида центрирования:

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

P { text-align: center }
h3 { text-align: center }

которое отображает каждую строку в абзаце P или заголовке h3 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P>Этот довольно ...

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG src="..." alt="...">

Следующее изображение центрировано:

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы
может быть выровнено по центру вертикально.

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV>
  <P>Этот маленький абзац...
</DIV>

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным (position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. (
‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

div.container5 {
  height: 10em;
  display: flex;
  align-items: center }
div.container5 p {
  margin: 0 }

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Created 5 May 2001;
Last updated

Выравнивание блока HTML (вертикально и горизонтально)

Центровка элемента — одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы.

Горизонтальная центровка.

С центровкой текста все ясно:

HTML tag center

Раньше встречалось использование тега <center>, который является валидным только в transitional doctype. Считается, что его использование аналогично действию text-align: center. Однако это не так. Им можно центрировать не только текст, но и контейнер вроде div.

Здесь я отцентрировал по горизонтали с помощью <center> контейнер с фиксированной шириной. При этом, если убрать <center> и дописать в стили <body> прилегание текста по центру, то эффекта центровки контейнера мы не получим. Обратите внимание, что на рисунке не только сам контейнер центрован, но и текст в нем также центрован.

Код примера в HTML

<html>
<head>
<style>
#sample {
   width: 200px;
   background: #8F8;
}
</style>
</head>
<body>
   <center>
       <div>
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
       when an unknown printer took a galley of type and scrambled it to make a type
       specimen book.
       </div>
   </center>

</body>
</html>

<html>

<head>

<style>

#sample {

width: 200px;

background: #8F8;

}

</style>

</head>

<body>

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a type

specimen book.

</div>

</center>

</body>

</html>

Margin: auto;

Чтобы стилями добиться эффекта подобного <center>, можно добавить специфический margin. Тогда тег <center> можно убрать.

#sample {
   width: 200px;
   background: #8F8;
   /* center tag */
   margin: 0 auto;
   text-align: center;
}

#sample {

width: 200px;

background: #8F8;

/* center tag */

margin: 0 auto;

text-align: center;

}

Центровка таблицей.

Кто любит табличную магию, те могут применять центровку таблицей. Результат аналогичен <center>.

Код HTML

<html>
<head>
<style>
#sample {
   width: 200px;
   background: #8F8;
}
</style>
</head>
<body>
   <table><tr><td align=»center»>
       <div>
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
       when an unknown printer took a galley of type and scrambled it to make a type
       specimen book.
       </div>
   </td></tr></table>
</body>
</html>

<html>

<head>

<style>

#sample {

width: 200px;

background: #8F8;

}

</style>

</head>

<body>

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a type

specimen book.

</div>

</td></tr></table>

</body>

</html>

Вертикальная центровка

Раз уж мы заговорили о ~~настоящей~~ табличной магии, то нет ничего сложного центровать контейнер в таблице по вертикали.

В таблице из прошлого примера добавим центровку по вертикали (valign=center»). Табличку я подкрасил, чтобы визуализировать её границы.

HTML код для табличной центровки контейнера по вертикали.

<html>
<head>
<style>
#sample {
   width: 200px;
   background: #8F8;
}
table {
   background: #88F;
}
</style>
</head>
<body>
   <table><tr><td align=»center» valign=center»>
       <div>
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,
       when an unknown printer took a galley of type and scrambled it to make a type
       specimen book.
       </div>
   </td></tr></table>
</body>
</html>

<html>

<head>

<style>

#sample {

width: 200px;

background: #8F8;

}

table {

background: #88F;

}

</style>

</head>

<body>

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a type

specimen book.

</div>

</td></tr></table>

</body>

</html>

Центровка с помощью CSS свойства vertical-align.

Vertical-align относиться к свойству прилегания строки, потому наш контейнер нужно сначала подготовить. Вместо дефолтного display: block нужно установить block-inline. Добавим внешний контейнер, который имитирует строку, где выравнивается наш тестовый блок.

Вроде бы все есть, но почему то центровки по вертикали не происходит. Чудо не случилось :). Все потому, что middle должен вычисляться относительно других элементов строки, а их нет.

HTML код примера выше.

<html>
<head>
<style>
#line {
/* контейнер имитирует строку 250 точек высотой */
   background-color: #88F;
   height: 250px;
   line-height: 250px;
}
#sample {
/* тестовый контейнер */
   width: 150px;
   background-color: #8F8;
   line-height: 18px;
   vertical-align: middle;
   display: inline-block;
}

</style>
</head>
<body>
   <div>
       <div>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry.
           Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
       </div>
   </div>
</body>
</html>

<html>

<head>

<style>

#line {

/* контейнер имитирует строку 250 точек высотой */

background-color: #88F;

height: 250px;

line-height: 250px;

}

#sample {

/* тестовый контейнер */

width: 150px;

background-color: #8F8;

line-height: 18px;

vertical-align: middle;

display: inline-block;

}

</style>

</head>

<body>

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

</div>

</body>

</html>

Чтобы пример заработал достаточно добавить в #line неразрывного пробела —  . Это также могут быть другие inline, block-inline контейнеры, вроде #sample.

Теперь все получилось, как задумано. Контейнер #sample занял положение по центру строки.

<body>
   <div>
       <div>
           Lorem Ipsum is simply dummy text of the printing and typesetting industry.
           Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
       </div>
        
   </div>
</body>

<body>

<div>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

</div>

</body>

Вот такая маленькая хитрость. 🙂

Центрирование в CSS: полное руководство

Центрирование элементов — самая популярная причина для жалоб на CSS.
«Ну почему нельзя было сделать всё попроще?» — возмущаются все кому не лень.
Думаю, проблема не в том, что это сложно сделать, а в том, что способов
центрирования элементов такое множество, что бывает
трудно выбрать подходящий.

Давайте построим древовидную схему для принятия решения и будем надеяться, что
это всё немного упростит.

Мне нужно отцентрировать элемент…

По горизонтали

Является ли элемент строчным или строчно-* (как текст или ссылки)?

Строчные элементы внутри родительского блочного можно центрировать так:

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

Это сработает для элементов с типом отображения inline, inline-block,
inline-table, inline-flex и т.д.

Является ли элемент блочным?

Блочный элемент можно центрировать, указав для margin-left и
margin-right значение auto (а также прописав для него конкретный
width, иначе он займёт всю ширину родительского контейнера и не будет
нуждаться в центрировании). Для этого часто используют сокращённую запись:

.center-me {
  margin: 0 auto;
}

Способ работает независимо от ширины центрируемого блочного элемента и его
родителя.

Обратите внимание, что заставить элемент плавать по центру с помощью float
нельзя. Хотя есть одна хитрость.

Вам нужно центрировать несколько блочных элементов?

Если вы имеете дело с двумя и больше блочными элементами, размещёнными в ряд,
которые нужно центрировать по горизонтали, возможно, вам потребуется
изменить тип display. Вот что произойдёт, если указать для
них тип отображения inline-block или применить flexbox:

В том же случае, если у вас несколько блочных элементов размещены друг над
другом, вполне сработает приём с автоматическими отступами:

По вертикали

С вертикальным центрированием в CSS все немного сложнее:

Это элемент строчного типа или строчно-* (как текст или гиперссылки)?

Он помещается в одну строку?

Иногда строчные/текстовые элементы могут выглядеть отцентрированными по
вертикали только потому, что у них одинаковые верхнее и нижнее поля (padding).

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Если использование полей по какой-либо причине невозможно, а вы хотите
отцентрировать текст, который точно не будет переноситься в следующую строку,
можно использовать хитрость с установкой line-height равной высоте элемента,
это отцентрирует текст:

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Элемент занимает несколько строк?

Центрирование нескольких строчек текста также можно сделать с помощью
установки одинаковых верхнего и нижнего полей, однако, если этот вариант вам не
подходит, можно сделать элемент, в который помещён текст, ячейкой таблицы —
буквально или же просто её имитацией на CSS. За центрирование в этом
случае отвечает свойство vertical-align, несмотря на то, что обычно
он просто выравниванивает по горизонтали элементы в ряду. (Более подробно об этом.)

Если вы имеете дело с некоей имитацией таблицы, может быть, стоит использовать
flexbox? Один дочерний flex-элемент можно довольно легко отцентрировать во
flex-родителе.

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Помните, что этот способ подходит только если у родительского контейнера указана
конкретная ширина (px, % и т.д.), поэтому здесь у контейнера есть высота.

Если оба этих способа не подходят, можно использовать приём «элемент-призрак», при
котором в контейнер помещается псевдоэлемент с максимальной высотой, и текст
выравнивается по горизонтали по этому элементу:

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block

Выравнивание HTML по центру страницы

Часто от расположения блока с информацией зависит то, как будет выглядеть дизайн в общем. Выравнивание элементов — очень важная часть любой верстки. Для верстальщика расположение блоков лежит в основе создания дизайна.

Элементы бывают разные — блочные и строчные. В этой статье мы подробно разберем все способы их выравнивания. Их можно выравнивать как через CSS, так и через атрибуты в HTML. Будет подробно описано выравнивание по горизонтали и вертикали.

Выравнивание по горизонтали

Заранее скажем о том, что элементы могут быть блочными и строчными. Тег

display:block

— блочный, он не требует переноса строки. Теги

<p>, <h2>, <h3>

и так далее — строчные, каждый из них требует переноса строки.

Задать этот параметр можно через CSS. Для этого используется свойство display. display:block — блочный элемент, display:inline или inline-block — строчный и полублочный.

Выравнивание строчных элементов по горизонтали

Строчные элементы обычно не имеют никаких трудностей с выравниванием по горизонтали. Их расположение можно задать через html атрибут text-align:

<p text-align="center">Текст</p>

— выравнивает текст по центру.

Данный способ работает не со всеми элементами. Его можно применять с параграфами, заголовками, изображениями, а также таблицами.

Кроме атрибута text-align, в html имеется специальный тег. Он работает также, но немного устарел, поэтому лучше пользоваться 1 способом. Пример использования тега:

<center>Текст</center>

Эти способы хороши, но выравнивание через css всё равно остаётся более приоритетным вариантом.

Горизонтальное выравнивание элементов со свойством «display: block»

С элементами, которые являются блочными, например, с тегом

<center>

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

Но не спешите огорчаться, есть метод, который позволит выровнять его через html. Для этого нужно уменьшить его ширину. Изначально его ширина равна 100% ширины родительского элемента. Вы же можете изменить её, лучше через CSS.

Эффект может быть не заметен. Чтобы наглядно увидеть то, как это работает, задайте цвет фона или сделайте рамку для этого блока.

Немного об адаптивности — не задавайте ширину элемента в пикселях, наиболее хорошим вариантом будут проценты. То есть, если вся страница — 100%, то внутренний контент можно сделать равным 80%. Это активно используется почти на всех современных сайтах.

Свойство margin

Это свойство можно назвать аналогом атрибута

<text-align>

или тега

<center>

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

Автоматическое выравнивание по центру:

margin: 0 auto;

Как только элементу будет присвоено данное свойство, он автоматически будет расположен в центре экрана.

Вышеуказанный вариант — упрощенная запись. Можно написать 4 отдельных свойства, для каждой стороны элемента:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

По сути, это тоже свойство margin: 0 auto, но лучше так не писать. Вышеуказанные 4 свойства лучше использовать, когда необходимо задать особое расположение элементу.

Тем более, зачем писать больше чем нужно. Это не целесообразно, а ещё делает код более громоздким и менее оптимизированным.

Немного об адаптивности

Мы показывали работу этих методов с использованием пикселей.

Для создания хорошей адаптивной страницы, нужно указывать процентное значение. У адаптивной верстки есть большое преимущества над обычной — если ваш сайт запустят на небольшом экране, то все элементы будут смотрится гармонично, а также не будут выходить за его пределы.

Вертикальное выравнивание элемента

По вертикали можно выровнять только блочный элемент, либо же полублочный. Задаются они так:

display: block; — блочный элемент.

display: inline-block — полублочный элемент.

Внимание! Советуем делать все строчные элементы полублочными, для удобства.

Ещё в начале обучения вертикальное выравнивание может поставить в тупик. Однако, здесь всё просто, просто немного математики. Для этого просто вычисляем ширину родительского блока (того, в котором и расположен нужный элемент). Делим полученное значение на 2, с округлением в большую сторону, а затем задаем соответствующее свойство.

Пример: высота всей страницы равна 2000px, значит отступить нужно ровно 100 пикселей. Для этого задаем следующее свойство:

margin: 50px auto;

Выравнивает по центру, как по вертикали, так и по горизонтали.

Почему 500, а не 1000? Потому что отступы делаются снизу и сверху. 500 снизу, 500 сверху = 1000.

Но есть и более простой способ. Свойство — margin: auto. Оно располагает блок по центру.

Его минусом является то, что он не работает на всех браузерах, так как значения элементов не всегда известны.

Другие хорошие свойства:

line-height — задает высоту строки;

vertical-align: middle — выравнивает по вертикали. Не работает c элементами «block».

Также неплохо использовать абсолютное позиционирование, но оно подходит для редких случаев.

Margin и padding

Эти 2 свойства хорошо подойдут для того, чтобы увеличить размер родительского блока.

margin: 300px; = padding: 300px;

Подробнее о line-height

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

Это отличный инструмент при создании сайдбара.

Просто задаем размер line-height, такой же, как и высота родителя.

line-height:300px; — при высоте родителя в 300px.

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

Иконки могут иметь большую высоту, чем строка. Можно изменить строку через line-height, но лучше использовать свойство vertical-align.

Выравнивание таблиц

Если элемент блочный, свойство vertical-align на нем не работает. Но можно прибегнуть к одному плохому методу — вместо блочного или строчного элемента, сделать табличный. Она идеально выравнивается по вертикали, но это не очень целесообразно.

Вот пример создания таблицы:

<div>                   								
<div>	  
	<h2>Заголовок</h2>
	<p>текст</p>                                                  			
	</div>
</div>
.table{
	display: table;
}
.cell{
	display: table-cell;
}

Position: absolute

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

Блок можно свободно перемещать через свойства top, left, bottom, right. По сути, вы просто задаете ему расположение относительно четырех указанных сторон.

Для большего удобства, элемент должен располагаться не внутри страницы, а в родительском блоке. Чтобы сделать это, задайте его родителю следующее свойство: position: relative.

Вот пример абсолютного позиционирования в CSS:

.all_content{
position: relative;
}
.content{
position: absolute;
margin: auto;
top: 250px;
bottom: 0;
left: 350px;
right: 0;
}

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

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

Теги:

Как центрировать div (по вертикали и горизонтали, IE8 +)

«Как центрировать div» (внутри другого div или внутри самого тела) — один из самых обсуждаемых вопросов, и, к моему удивлению, существует масса руководств что полностью усложняет эту проблему, обычно также со множеством недостатков, таких как фиксированная высота и ширина блока содержимого. Однако есть простой, не требующий взлома, чистый, готовый к реагированию и кроссбраузерный метод, который также не требует каких-либо настроек div с фиксированным размером пикселя:

Полностью кроссбраузерный.Работает во всех браузерах (IE8 и выше).
Абсолютно жидкий, размер div не требуется
Абсолютно чистый, без каких-либо странных взломов. Весь код используется так, как должен.

Метод 1:
Центрировать div по центру области просмотра

CSS

 html, body {
    маржа: 0;
    отступ: 0;
    ширина: 100%;
    высота: 100%;
    дисплей: таблица;
}
.container {
    дисплей: таблица-ячейка;
    выравнивание текста: центр;
    вертикальное выравнивание: средний;
}
.content {
    цвет фона: красный; / * только для демонстрации * /
    дисплей: встроенный блок;
    выравнивание текста: слева;
}

HTML

 
    
        контент контент контент
        

        муооооооооооооооооооооооооооооооо
        

        другой контент

Результат

См. JSFiddle здесь: http: // jsfiddle.net / panique / pqDQB / 35/

Метод 2:
Центрировать div по вертикали и горизонтали внутри другого div

Это очень полезно в ситуации, когда вам нужно центрировать содержимое внутри div, у которого нет определенного пикселя размер. Обратите внимание, что для этого не требуется НИКАКОГО определения размера в пикселях. В демонстрационных целях мы указываем размеры пикселей родительского div demo, просто чтобы создать наглядный пример.

CSS

 .parent {
    дисплей: таблица;
    / * необязательно, только для демонстрации * /
    высота: 300 пикселей;
    фон: желтый;
}
.child {
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний;
    / * необязательно, только для демонстрации * /
    фон: красный;
}
.content {
    / * необязательно, только для демонстрации * /
    фон: синий;
}

HTML

Результат

См. Pen baity от Panique (@Panique) на CodePen.

Связанные статьи в Интернете

Эта статья была написана довольно давно (7 лет), пожалуйста, имейте это в виду при использовании информации, написанной здесь.Ссылки, код и команды могут быть устаревшими или поврежденными.

Красивые горизонтально центрированные меню

Мэтью Джеймс Тейлор ›Веб-дизайн› Макеты ›Центрированные меню

Многие люди хотят центрированное меню на своем веб-сайте, но для новичка в CSS эта задача кажется невыполнимой.

Если вы выполните поиск в Интернете, вы найдете несколько методов центрирования, но большинство из них основаны на хаках CSS, JavaScript или нестандартных правилах CSS, которые поддерживаются не всеми браузерами.

В этом посте я собираюсь показать вам мой секретный метод создания центрированных вкладок, который не использует никаких CSS-хаков и будет работать во всех распространенных веб-браузерах вплоть до IE 5.5!

Он также совместим с моими идеальными жидкими макетами.

Начнем с простого примера, а затем я объясню, как это работает.

Базовый пример центрированного меню

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

См. Еще несколько примеров расширенного центрированного меню CSS

Центрированное меню HTML

HTML, используемый для центрированных меню, семантически структурирован и очень прост. Структура — это просто список ссылок в одном блоке.

  
   
        Первая вкладка  
        Вторая вкладка  
        Третья вкладка  
        Четвертая вкладка

Центрированное меню CSS

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

  #centeredmenu {
   плыть налево;
   ширина: 100%;
   фон: #fff;
   нижняя граница: твердое тело 4px # 000;
   переполнение: скрыто;
   положение: относительное;
}
#centeredmenu ul {
   ясно: слева;
   плыть налево;
   стиль списка: нет;
   маржа: 0;
   отступ: 0;
   положение: относительное;
   осталось: 50%;
   выравнивание текста: центр;
}
#centeredmenu ul li {
   дисплей: блок;
   плыть налево;
   стиль списка: нет;
   маржа: 0;
   отступ: 0;
   положение: относительное;
   справа: 50%;
}
#centeredmenu ul li a {
   дисплей: блок;
   маржа: 0 0 0 1px;
   отступ: 3px 10px;
   фон: #ddd;
   цвет: # 000;
   текстовое оформление: нет;
   высота строки: 1.3em;
}
#centeredmenu ul li a: hover {
   фон: # 369;
   цвет: #fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active: hover {
   цвет: #fff;
   фон: # 000;
   font-weight: жирный;
}

Как работает метод центрирования

Уловка моего метода центрирования состоит в том, как плавающие элементы относительно друг друга расположены. Чтобы правильно объяснить это, позвольте мне сначала описать, как элемент может изменять свои размеры при перемещении.

Не плавающий div

Вот div (элемент уровня блока), который не является плавающим. Обратите внимание, как он растягивается до 100% ширины содержащего его элемента, в данном случае до всей страницы.

Левый плавающий div

Если теперь мы переместим div влево, он автоматически сожмется, чтобы соответствовать ширине содержимого внутри себя. Теперь его ширина равна ширине текста «Div». Это сжатие является ключом к процессу центрирования, оно помогает нам переместить наше меню на нужную величину в центр.

Стандартное меню с выравниванием по левому краю

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

Обратите внимание на следующее.

Блок div ‘centeredmenu’ (синий прямоугольник) перемещается влево, но мы задаем ему ширину 100%, чтобы он оставался растянутым по всей странице.
Элемент ul (розовая рамка) находится внутри div ‘centeredmenu’ и перемещается влево.Это означает, что ul будет уменьшаться до ширины своего содержимого, как раз так получилось, что это ширина всех вкладок.
Все элементы li (зеленые прямоугольники) находятся внутри ul, и каждый перемещается влево. Это заставляет их сжиматься вокруг ссылки внутри себя, и все они выстраиваются в горизонтальный ряд.
Внутри каждой ссылки (оранжевое поле) находится текст, который появляется на вкладке; Вкладка 1, вкладка 2 и т. Д.

Сдвиг позиции неупорядоченного списка

Затем мы смещаем элемент ul вправо на 50%, используя значение position: relative; .При перемещении элемента в сторону на процент таким образом важно отметить, что он будет перемещать процент от своего , содержащего ширину элемента , а не своей собственной ширины. Таким образом, в этом случае элемент ul переместится вправо на 50% ширины div ‘centeredmenu’ — это половина окна браузера. Конечным результатом является то, что наши меню начинаются с середины экрана и частично выходят за пределы страницы вправо, но не волнуйтесь, еще на одном шаге они будут в центре.

Сдвиг позиции всех позиций

Последний шаг — сдвинуть все элементы li назад влево на 50%. Это 50% ширины элемента ul (содержащего их элемента), и он поместит вкладки точно в центр окна.

Некоторые важные примечания

Этот метод центрирования меню надежен, но есть несколько вещей, о которых вы должны знать.

Поскольку элемент ul частично находится за пределами страницы, окно вашего браузера будет прокручиваться в сторону, если вы не укажете overflow: hidden; правило для div ‘centermenu’.Это отрубит нависающий div. Если вы не хотите использовать переполнение : hidden; , затем просмотрите мою статью о центрированном раскрывающемся меню, в которой объясняется, как его удалить.
Поскольку элемент ul не выровнен с вкладками, вы не можете добавить к нему какой-либо видимый стиль. Оставьте элемент ul без цвета фона и без рамки, чтобы он был полностью невидимым. Делайте все стили вкладок только для элементов li и a.
Если вам нужно стилизовать первую или последнюю вкладку по-другому, чем остальные, добавьте класс к первому и последнему элементу li, чтобы их можно было настраивать индивидуально.

Итак, вот основные особенности меню, центрированного на чистом CSS.

Нет CSS-хаков

CSS, используемый для этих центрированных меню, на 100% действителен и не требует взлома. Чтобы преодолеть модель ломаного ящика Internet Explorer, не используются горизонтальные отступы или поля. Вместо этого в этом дизайне используется умное относительное позиционирование.

Действительная строгая разметка XHTML

HTML в этих центрированных меню проверяется как XHTML 1.0 strict.

Совместимость с изменяемым размером текста

Эти центрированные вкладки полностью совместимы с текстом изменяемого размера.Изменяемый размер текста важен для доступности в Интернете. Люди с ослабленным зрением могут увеличить текст, чтобы им было легче читать. Становится все более важным сделать ваш веб-сайт совместимым с текстом с изменяемым размером, потому что люди ожидают более высокого уровня веб-доступности.

JavaScript не требуется

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

Полная кросс-браузерная совместимость

Меню, центрированные на чистом CSS, были протестированы в следующих браузерах.

iPhone и iPod Touch

Mac

Окна

Firefox 2+
Safari
Opera
Google Chrome
Internet Explorer 5.5 и выше.

Не забудьте просмотреть более сложные примеры центрированных вкладок, чтобы увидеть, что можно сделать.

Если вы хотите добавить раскрывающиеся меню, я вас тоже позаботлю.

Обновлено: 26 июля 2008 г.

Первая публикация: 27 июля 2008 г.

Как по горизонтали выровнять три div внутри контейнера div?

Вы используете код

 (`` `) [Выберите нужный стиль синтаксиса, html, css и т. Д.]
[Код, который вы хотите показать]
(`` `)

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

Я поигрался с вашим JSFiddle: http://jsfiddle.net/rF4a5/1/

Вы в основном удаляете контейнер центрального столбца, перемещаете div column_right так, чтобы он находился над div column_center. Вы даете им одинаковую ширину (33,3%) и убираете верхнюю границу поля column_right.

Но опять же, это работает, только если вы хотите, чтобы все 3 столбца были одинаковой ширины. Я бы порекомендовал вам пройти немного более традиционный маршрут:

 *, *: до, *: после {
    -webkit-box-sizing: рамка-рамка;
    -moz-box-sizing: рамка-рамка;
    размер коробки: рамка-рамка;
}

.clearfix: after {
     видимость: скрыта;
     дисплей: блок;
     размер шрифта: 0;
     содержание: "";
     ясно: оба;
     высота: 0;
     }
.clearfix {дисплей: встроенный блок; }
* html .clearfix {высота: 1%; }
.clearfix {дисплей: блок; }

.строка {
    маржа: 0 авто;
    максимальная ширина: 1000 пикселей;
    ширина: 100%;
}

.column {
    плыть налево;
    отступ: 0 15 пикселей;
}

.span_4 {
    ширина: 33,3333%;
}

Тогда единственное, что вам действительно нужно будет изменить или добавить, это от span_1 до span_12, давая им% ширины (например, span_7 будет 100/12 * 7 = 58.3333, поэтому span_7 будет шириной: 58,3333%).

Затем вы можете использовать любую комбинацию классов span_xx в строке, которая в сумме составляет 12, чтобы создать столько столбцов, сколько захотите.

Вы можете перейти в Boostrap (http://getbootstrap.com/css/#grid) или Foundation (http://foundation.zurb.com/docs/components/grid.html) и посмотреть, как они делают свои сетки, чтобы вы могли бы лучше понять!

Надеюсь, эта огромная стена текста помогла, дайте мне знать, если есть что-то, что вам все еще неясно 🙂

HTML: тег

Это руководство по HTML объясняет, как использовать элемент HTML, называемый тегом

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

Описание

Тег HTML

используется для центрирования текста по горизонтали в документе HTML. Поскольку этот тег был удален в HTML5, рекомендуется использовать свойство CSS text-align для форматирования текста в документе по горизонтали. Этот тег также обычно называют элементом.

ПРЕДУПРЕЖДЕНИЕ: Тег был удален в HTML5. Вместо этого используйте CSS, например свойство text-align.

Синтаксис

В HTML синтаксис тега

  <тело>
<центр>
   Ваш центрированный текст идет сюда

Пример вывода

Атрибуты

К тегу

применяются только глобальные атрибуты.Нет никаких атрибутов, специфичных для тега.

Примечание

HTML-элемент находится внутри тега.
Тег устарел в HTML5. Вместо этого используйте свойство CSS text-align для форматирования горизонтального выравнивания текста.

Совместимость с браузером

Тег

имеет базовую поддержку в следующих браузерах:

Хром
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Пример

Мы обсудим тег

ниже, исследуя примеры того, как использовать тег в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

HTML5 Документ

Вы не можете использовать тег

в HTML5. Вместо этого используйте свойство CSS text-align для форматирования горизонтального выравнивания текста.

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

может выглядеть так:

  




 Переходный пример HTML 4.01 от www.techonthenet.com 



 Заголовок 1 
<центр>
   Ваш центрированный текст идет сюда

В этом примере переходного документа HTML 4.01 текст в теге

будет центрирован по горизонтали.

XHTML 1.0 Переходный документ

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

может выглядеть так:

  




 XHMTL 1.0 Transitional Example by www.techonthenet.com 



 Заголовок 1 
<центр>
   Ваш центрированный текст идет сюда

В этом примере переходного документа XHTML 1.0 текст в теге

будет центрирован по горизонтали.

XHTML 1.0 Strict Document

Вы не можете использовать тег

в XHTML 1.0 Strict.

XHTML 1.1 Документ

Вы не можете использовать тег

в XHTML 1.1.

Масштабирование по горизонтали

Платформу Sitecore Experience можно масштабировать по горизонтали, выделив несколько экземпляров для определенной роли. Например, обычной практикой является увеличение количества серверов доставки контента (CD) по мере увеличения количества трафика.

Несколько экземпляров доставки контента

В следующем сценарии трафик распределяется между несколькими серверами компакт-дисков, которые находятся за балансировщиком нагрузки:

Имейте в виду следующее:

Если используются несколько экземпляров компакт-дисков, вы должен использовать состояние сеанса вне процесса, как показано, для поддержки нескольких одновременных устройств.
Вам решать, использовать ли прикрепленные сеансы или нет — это не требуется, поскольку все компакт-диски в кластере совместно используют сервер состояния сеанса.
Для состояния сеанса доступно несколько поставщиков.
В этом сценарии каждый сервер компакт-дисков в этом кластере выполняет чтение из одной и той же веб-базы данных (вы также можете настроить кластеры доставки контента).
Если вы используете файловые носители, вы должны синхронизировать носители на всех серверах компакт-дисков.

Несколько экземпляров Content Management

В следующем сценарии трафик создания распределяется между несколькими серверами Content Management (CM), которые находятся за балансировщиком нагрузки:

Имейте в виду следующее:

Серверы CM используйте ту же главную базу данных — в настоящее время нет поддержки для репликации главной базы данных. Обзор поддержки масштабирования SQL см. В следующей статье базы знаний: https: // kb.sitecore.net/articles/423602
Если вы используете файловые носители, вы должны синхронизировать носители на всех серверах CM.
Если у вас несколько серверов CM, необходимо настроить выделенный экземпляр службы отчетов.

Несколько экземпляров обработки

В следующем сценарии обработка и агрегирование обрабатываются несколькими серверами обработки:

Имейте в виду следующее:

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

Несколько экземпляров службы XP

Вы можете запустить несколько экземпляров любой службы XP за балансировщиком нагрузки. Сюда входят:

Примечание

Вы также можете распределить нагрузку в нескольких средах XP Single, где все службы XP объединены на одном компьютере.

При настройке балансировщика нагрузки учитывайте следующее:

Индексатор поиска xConnect поддерживает только один экземпляр

Хотя можно масштабировать службу поиска xConnect, может быть только один экземпляр индексатора поиска xConnect . В Microsoft Azure веб-задание индексатора автоматически настраивается для работы в одном экземпляре с возможностью переключения на другой экземпляр.

Automation Engine поддерживает несколько экземпляров

В отличие от поискового индексатора xConnect, Marketing Automation Engine поддерживает несколько экземпляров.В Azure это означает, что веб-задание будет выполняться одновременно на всех экземплярах служб автоматизации маркетинга.

Наш ЛЮБИМЫЙ способ горизонтального центрирования в HTML и CSS

5 декабря 2014 г.

Центрирование вещей всегда было для разработчиков постоянным компромиссом. На самом деле не существует универсального способа горизонтально центрировать объекты, который гарантированно работал бы при любых обстоятельствах. Вы пытаетесь центрировать один элемент? Есть несколько элементов? У них разная ширина? Должен ли он быть отзывчивым? Можете ли вы добавить классы к родительскому?

Один из моих любимых способов решения проблемы горизонтального центрирования — установить для родительского CSS значение text-align: center и добавить display: inline-block для каждого дочернего элемента.Это особенно полезно, если у вас есть несколько элементов определенной или автоматической ширины, которые необходимо центрировать внутри родительского элемента:

Действительно быстрый и простой способ сделать это, требует всего пары строк кода.

HTML:

CSS:

.круги-родитель {выравнивание текста: центр; }
.circle {фон: зеленый; радиус границы: 50%; дисплей: встроенный блок; маржа: 0 15px; }

.circles-parent {выравнивание текста: центр; }

.circle {фон: зеленый; радиус границы: 50%; дисплей: встроенный блок; маржа: 0 15 пикселей; }

Основными стилями, на которые следует обратить внимание, являются «text-align: center» для родительского элемента и «display: inline-block» для кругов.

Это будет центрировать все три круга внутри вашего родительского контейнера. В основном он обрабатывает внешнюю часть встроенных блочных элементов как элемент уровня блока с автоматическими полями, но сохраняет встроенные функции внутри. Еще одним плюсом является то, что я обнаружил, что это работает вплоть до IE8, а это означает, что вы можете использовать эту тактику практически все время.

Есть много других способов центрировать объекты, и каждый из них имеет свое применение.

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

Выравнивание слоя по центру | htmlbook.ru

Использование отступов

Атрибут align тега <div>

Абсолютное позиционирование слоя

CSS: выравнивание по центру

Центрирование

Центрирование строк текста

Центрирование блока или изображения

Вертикальное центрирование

Центрирование по вертикали в CSS уровня 3

Вертикальное и горизонтальное центрирование в CSS уровня 3

Центрирование в области просмотра в CSS уровня 3

Навигация по сайту

CSS: выравнивание по центру

Центрирование

Центрирование строк текста

Центрирование блока или изображения

Вертикальное центрирование

Центрирование по вертикали в CSS уровня 3

Вертикальное и горизонтальное центрирование в CSS уровня 3

Центрирование в области просмотра в CSS уровня 3

Выравнивание блока HTML (вертикально и горизонтально)

Горизонтальная центровка.

Вертикальная центровка

Центрирование в CSS: полное руководство

По горизонтали

Является ли элемент строчным или строчно-* (как текст или ссылки)?

Является ли элемент блочным?

Вам нужно центрировать несколько блочных элементов?

По вертикали

Это элемент строчного типа или строчно-* (как текст или гиперссылки)?

Он помещается в одну строку?

Элемент занимает несколько строк?

Выравнивание HTML по центру страницы

Выравнивание по горизонтали

Выравнивание строчных элементов по горизонтали

Горизонтальное выравнивание элементов со свойством «display: block»

Свойство margin

Немного об адаптивности

Вертикальное выравнивание элемента

Margin и padding

Подробнее о line-height

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

Выравнивание таблиц

Position: absolute

Как центрировать div (по вертикали и горизонтали, IE8 +)

Метод 1: Центрировать div по центру области просмотра

Метод 2: Центрировать div по вертикали и горизонтали внутри другого div

Связанные статьи в Интернете

Красивые горизонтально центрированные меню

Базовый пример центрированного меню

Центрированное меню HTML

Центрированное меню CSS

Как работает метод центрирования

Не плавающий div

Левый плавающий div

Стандартное меню с выравниванием по левому краю

Сдвиг позиции неупорядоченного списка

Сдвиг позиции всех позиций

Некоторые важные примечания

Нет CSS-хаков

Действительная строгая разметка XHTML

Совместимость с изменяемым размером текста

JavaScript не требуется

Полная кросс-браузерная совместимость

iPhone и iPod Touch

Mac

Окна

Как по горизонтали выровнять три div внутри контейнера div?

HTML: тег

Описание

Синтаксис

Пример вывода

Атрибуты

Примечание

Совместимость с браузером

Пример

HTML5 Документ

HTML 4.01 Переходный документ

Абсолютное позиционирование
слоя

Метод 1:
Центрировать div по центру области просмотра

Метод 2:
Центрировать div по вертикали и горизонтали внутри другого div