БлогNot. О выравнивании элементов по центру средствами HTML5 и CSS3

Fvt помощь ¿ поиск ≡ статистика ⌂ домой

О выравнивании элементов по центру средствами HTML5 и CSS3

Заметим, что в самом по себе HTML5 "блочных" и "строчных" элементов, по сути, нет. Роль элементов теперь, пожалуй, чисто логическая, а визуальная структура оформления, в которой есть "блочные" и "строчные" элементы, относится только к стилям CSS.

Тем не менее, в основе идеологии CSS3 остаётся старое доброе разделение элементов HTML на 2 типа:

  • Блочный элемент (block) - то, что создает разрыв строки перед тегом и после него. Может содержать внутри себя элементы любого типа. Обычно блочные элементы не размещают внутри строчных, исключение - тег картинки <img>.
  • Строчный (встроенный) элемент (inline) - не создаёт разрыва строки при добавлении. Строчные элементы - потомки блочных. Обычно они игнорируют верхние и нижние отступы. Задать размеры строчных элементов с помощью CSS нельзя, можно лишь увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.

С помощью CSS элементы "взаимопревращаемы": 

div {
 display: inline;
} /*превращаем блочный элемент раздела в строчный;
    это приведёт к тому, что разделы начнут показываться "в строчку"*/
a {
 display: block;
} /*превращаем строчный элемент в блочный для тега ссылки a;
    в нашем случае из-за этого весь блок, а не только текст ссылки, станет ссылкой*/

Теперь типовые ситуации, когда хочется выровнять, не пользуясь отсутствующими в стандарте HTML5 атрибутами align/valign.

1. Горизонтальное выравнивание по центру страницы, для блока задана ширина
<style type="text/css">
 .box {
  width: 600px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
  background-color: darkgray;
 }
</style>

<div class="box">
 Блочный элемент
</div>

Работает, если элемент блочный. Если он строчный - задать дополнительно в стиле display: block;

<style type="text/css">
 .box {
  width: 600px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
  display: block;
  background-color: darkgray;
 }
</style>

<span class="box">
 Строчный элемент
</span>
1
1
2. Горизонтальное выравнивание содержимого по центру страницы, для блока не задана ширина
<style type="text/css">
 .box {
  text-align: center;
  background-color: darkgray;
 }
</style>

<div class="box">
 <div>Content</div>
</div>
2
2
3. Выравнивание по центру родительского блока, если для блока с контентом задана ширина
<style type="text/css">
 .outbox {
  width: 80%;
  position: relative;
  background-color: darkgray;
 }
 .inbox {
  width: 50%;
  position: absolute; 
  left: 50%; 
  margin-left: -25%;
  background-color: lightgray;
 }
</style>

<div class="outbox">
Родитель спозиционирован относительно
 <div class="inbox">
  А дочерний блок - абсолютно
 </div>
</div>

Ширина внешнего блока outbox задана относительно ширины окна, и ширина внутреннего inbox - относительно родителя.

Затем мы устанавливаем смещение дочернего блока влево на половину его ширины.

Фоновые цвета заданы просто чтобы блоки были видны.

3
3
4. Горизонтальное выравнивание по центру родительского блока, если для блоков не задана ширина
<style type="text/css">
 .outbox {
  text-align: center;
  background-color: darkgray;
 }
 .inbox {
  display: inline-block;
  margin-right: -0.2em;
  background-color: lightgray;
 }
</style>

<div class="outbox">
 <div class="inbox">контент</div>
 <div class="inbox">контент</div>
 <div class="inbox">контент</div>
 <div class="inbox">контент</div>
</div>

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

4
4
5. Вертикальное выравнивание текста в строчном элементе

Если текст занимает одну строчку, например, это кнопка или пункт меню.

<style type="text/css">
 .box {
  height: 100px;
  line-height: 100px;
  background-color: lightgray;
 }
</style>

<button class="box">кнопка</button>
<span class="box">текст</span>
5
5
6. Вертикальное выравнивание блока в родительском блоке
<style type="text/css">
 .outbox {
  position: relative;
  background-color: darkgray;
 }
 .inbox {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
  background-color: lightgray;
 }
</style>

<div class="outbox">
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <div class="inbox">
   Внутренний блок
 </div>
</div>
6
6
7. Горизонтальное и вертикальное выравнивание табличного типа с использованием вложения блоков
<style type="text/css">
 .outbox {
   display: table;
   width: 100%;  
   background-color: darkgray;
 }
 .inbox {
   display: table-cell;
   height: 100px;
   text-align: center;
   vertical-align: middle;
   background-color: lightgray;
 }
</style>

<div class="outbox">
 <div class="inbox">Внтуренний блок Внтуренний блок Внтуренний блок</div>
</div>

Весь контент должен находиться во внутреннем блоке.

7
7
8. Выравнивание блока с заданными шириной и высотой по центру родительского блока
<style type="text/css">
 .outbox {
  position: relative;
  background-color: darkgray;
 }
 .inbox {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: auto; 
  background-color: lightgray;
 }
</style>

<div class="outbox">
 <p>Внешний блок</p>
 <p>Внешний блок</p>
 <p>Внешний блок</p>
 <div class="inbox">
   Внутренний блок
 </div>
 <p>Внешний блок</p>
 <p>Внешний блок</p>
 <p>Внешний блок</p>
</div>
8
8
9. Абсолютное позиционирование пустого элемента с заданными размерами по центру страницы или блока
<style type="text/css">
 .box {
  width: 300px; /*ширина блока*/
  height:100px; /*высота блока*/
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  background-color: lightgray;
 }
</style>

<div class="box"></div>
9
9
10. Абсолютное позиционирование непустого элемента с заданными размерами по центру страницы или блока
<style type="text/css">
 .box {
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  background-color: lightgray;
 }
</style>

<div class="box">Content</div>

Здесь и в п. 9 существенно используется такая возможность современных стилей как CSS3-трансформация.

10
10
11. Абсолютное позиционирование блока по центру страницы
<style type="text/css">
 .box {
  width: 600px;
  height: 480px; /* если высота не задана явна, получится 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: lightgray;
 }
</style>

<div class="box">Content</div>
11
11
12. Абсолютное позиционирование блока по центру родительского блока
<style type="text/css">
 .outbox {
  position: absolute;
  background-color: darkgray;
 }
 .inbox {
  width: 100px;
  height: 100px; /* если высота не задана явна, получится 100% */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: lightgray;
 }
</style>

<div class="outbox">
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <p>Внешний блок, его ширина явно не задана, он наполнен контентом</p>
 <div class="inbox">
   Внутренний блок
 </div>
</div>
12
12

Для проверки кода везде использовался такой документ HTML5, кодировка Юникода UTF-8:

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Center</title>
 </head>
<body>

<!-- вставить код вместо этого комментария -->

</body></html>

24.05.2016, 12:06 [10225 просмотров]

теги: список html css вебдезигн

К этой статье пока нет комментариев, Ваш будет первым