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

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

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

Можно выровнять текст, правильно установивВыравнивание текстачтобы выровнятьБлочныйТекст в элементе.

h1 {
　　　　text-align: center;
}
p {
　　　　text-align: left;
}

См.CSS TextУрок, чтобы узнать больше о форматировании текста.

Использование свойства margin для выравнивания по центру

БлочныйЦентрирование элементов по центру является одним из основных значений свойства margin в CSS. Например, установив левый и правый отступы в auto, можно выровнять контейнер <div> по горизонтали.

div {
　　　　width: 50%;
　　　　margin: 0 auto;
}

В примере стилей, приведенных выше, элементы выравниваются по горизонтали.

Использование атрибута position для выравнивания элементов

CSS positionИспользование свойств left и right с атрибутом position позволяет выравнивать элементы относительно viewport документа или содержимого родительского элемента. topbottom

.up {
　　　　position: absolute;
　　　　top: 0;
}
.down {
　　　　position: absolute;
　　　　bottom: 0;
}

Чтобы узнать больше о позиционировании элементов, обратитесь кCSS позиционированиеУрок.

Использование атрибута float для выравнивания влево и вправо

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

Таким образом, если элемент плавает к левому краю, его содержимое будет двигаться вправо. Напротив, если элемент плавает к правому краю, его содержимое будет двигаться влево.

div {
　　　　width: 200px;
　　　　float:　левый;
}

Удаление плавания

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

Вы увидите

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

Исправление перекрывающего родителя

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

Решение 1: плавающий контейнер

Самый простой способ решить эту проблему - это浮动 родительского элемента контейнера.

.container　{
　　　　float:　левый;
　　　　background:　#f2f2f2;
}

Решение 2: использование пустого Div

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

.clearfix　{
　　　　clear:　оба;
}
/*　html　code　snippet　*/

Вы также можете выполнить это через тег, но不建议 использовать этот метод, так как он добавляет несемантический код в маркеры.

Решение 3: использование псевдоэлемента :after

Этот :after Псевдоэлементыс союзомcontentСобственность уже широко используется для решения проблем с плавающими вычислениями.

.clearfix:after　{
　　　　content:　".";
　　　　display:　блок;
　　　　height:　0;
　　　　clear:　оба;
　　　　visibility:　скрытый;
}

Этот класс clearfix подходит для любого контейнера с плавающими подэлементами.