Размещение CSS -水平和ное и вертикальное выравнивание

Элементы выровнены

Элементы, выровненные по горизонтали и вертикали

Центрировать элемент

Чтобы выровнять блочный элемент (например, <div>) по горизонтали, используйте отступ: auto;.

Установка ширины элемента предотвратит его расширение до края контейнера.

Затем, элемент займет указанную ширину, а оставшееся пространство будет распределено между двумя внешними отступами поровну:

Этот div-элемент выровнен по центру.

Пример

.center {
  отступ: auto;
  ширина: 50%;
  border: 3px solid green;
  padding: 20px;
{}

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

Обратите внимание:Если не установлено ширина параметр (или установите его в 100%), то выравнивание по центру будет无效.

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

Если нужно выровнять текст только внутри элемента, используйте text-align: center;:

Этот текст выровнен по центру.

Пример

.center {
  text-align: center;
  border: 3px solid green;
{}

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

Совет:Для получения примеров, как выравнивать текст, см. также Текст CSS Эта глава.

Центрировать изображение

Если нужно выровнять изображение по центру, установите внешние отступы слева и справа autoи установите его в качестве блочного элемента:}

Пример

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
{}

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

левое и правое выравнивание - использовать position

Одним из способов выравнивания элементов является использование position: absolute; :

Этот div выровнен вправо.

Пример

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
{}

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

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

левое и правое выравнивание - использовать float

Другой способ выравнивания элементов - использовать float Атрибуты:

Пример

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
{}

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

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

clearfix Hack

Затем мы можем добавить к содержащему элементу overflow: auto;чтобы решить эту проблему:

Пример

.clearfix {
  overflow: auto;
{}

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

вертикальное выравнивание - использовать padding

Существует множество методов выравнивания элементов по вертикали в CSS. Простое решение - использовать верхние и нижние отступы:

Я вертикально выровненный.

Пример

.center {
  padding: 70px 0;
  border: 3px solid green;
{}

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

Если необходимо одновременно выравнивать по горизонтали и вертикали, используйте padding и text-align: center;:

Я выровнен水平和 вертикально.

Пример

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
{}

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

вертикальное выравнивание - использовать line-height

Одна из хитростей - использоватьее значениюравен height Атрибут значений line-height Атрибуты:

Я выровнен水平和 вертикально.

Пример

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
{}
/* Если есть многострочный текст, добавьте следующий код: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
{}

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

вертикальное выравнивание - использовать position и transform

Если ваш выбор не padding и line-heightЕсли другой вариант решения position и transform Атрибуты:

Я выровнен水平和 вертикально.

Пример

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
{}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: перевести(-50%, -50%);
{}

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

Совет:Вы узнаете о 2D преобразования В этой главе вы узнаете больше о свойстве transform

Вертикальное выравнивание - использование Flexbox

Вы также можете использовать flexbox для выравнивания содержимого. Обратите внимание, что IE10 и более ранние версии не поддерживают flexbox:

Я выровнен水平和 вертикально.

Пример

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
{}

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

Совет:Вы узнаете о Flexbox в CSS В этой главе вы узнаете больше о Flexbox