Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Как сделать div по центру: Выравниваем блок по центру страницы / Хабр

On

Как сделать div по центру: Выравниваем блок по центру страницы / Хабр

By alexxlab

Содержание

Как выровнять блок (div) по центру — все популярные способы выравнивания

Подробное руководство по центрированию элементов на странице.

В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.

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

Первый способ

Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;

.myblock {
  text-align: center;
}

Выравнивание по центру с помощью text-align: center;

⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:

Весь текст в блоке теперь по центру

Таким образом данный способ подойдет для конкретной строки (например для h3,h4 и тд). Но для центрирования блока это плохой вариант.

Второй способ

Тоже достаточно простой способ. Используем display: flex;

К примеру, хотим выровнять один блок (заголовок h2):

<div>
  <div>
    <h2>Заголовок</h2>
  </div>  
</div>
.myblock {
  background: white;
  display: flex;
  justify-content: center;
}

Центрирование с помощью flex

⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .myblock, то нужно немного изменить css.

<div>
  <h2>Заголовок</h2>
  <div>
    Небольшой текст
  </div>
</div>

Здесь мы добавили блок с классом width-1-2, чтобы продемонстрировать, как работает центрирование для блоков с заданной шириной.

.myblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.width-1-2 {
  width: 50%;
  background: lightblue;
}

Нам пришлось добавить в css свойство flex-direction: column, чтобы сменить основную ось (была горизонтальная, стала вертикальная) и разместить блоки друг над другом. И раз мы сменили ось, то теперь нам нужно использовать align-items:center, чтобы разместить блок по центру.

Как видите, блоки размещены по центру, при этом, в отличие от text-align: center; текст внутри div не центрирован.

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

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

Здесь все немного интереснее, но все так же при этом просто и понятно.

Первый способ

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

Как выровнять по центру текст или картинку » Блог Андрея Бондаренко

Здравствуйте, уважаемые читатели. Сегодня у нас тема: «Как выровнять по центру текст или картинку». Как сделать так, чтобы текст или картинка на странице сайта были по центру? Есть несколько способов.

Выравнивание по центру — способ №1

Этот способ считается не совсем правильным, но всё же расскажу и о нём. Нужно текст или картинку разместить между открывающимся и закрывающимся <center>.

<center> текст или картинка </center>
Выравнивание по центру — способ №2

Можно использовать <div> или <p>, то есть разместить текст или картинку, между открывающимся и закрывающимся тегом <div> или <p>.

<div> текст или картинка </div>
<p> текст или картинка </p>
Выравнивание по центру — способ №3

Использовать <div> как и в предыдущем примере, но все его атрибуты прописать в файле css, если Вы используете CSS.

 <div> текст или картинка </div>

В файле css создаём класс:

 .center {text-align: center;}
Выравнивание по центру — способ №4

Всё как и в предыдущем примере, только класс нужно прописать прямо в коде страницы, между открывающимся и закрывающимся тегом <style>.

 <style> .center {text-align: center;} </style>
<div> текст или картинка </div>

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

Сегодня мы рассмотрели тему: «Как выровнять по центру текст или картинку». Узнали несколько способов как добиться желаемого результата.

Надеюсь статья была вам полезна. До встречи в новых статьях.

✍

С уважением, Андрей Бондаренко.

Вертикальное и горизонтальное выравнивание по центру на HTML и CSS

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

Выровнять объект по горизонтали несложно для этого достаточно использовать спецификацию CSS margin. Вспомогательной здесь является спецификация display. Все, что потребуется создать это контейнер div с соответствующими параметрами:

<div>Выравниванием содержимое по центру</div>

Параметр спецификации display table указывает на то, что объект якобы является блочной таблицей.

Итак, горизонтальное выравнивание по центру оказалось несложным. Далее предстоит сделать то же самое, но еще и по вертикали.

Для этого нужно будет добавить еще один контейнер <div>. Также нужно использовать спецификацию display, но уже с параметром table-cell, якобы указывая на ячейку таблицы. В таблице же параметром, отвечающим за положение по вертикали является vertical-align. Итак, используя все спецификации получаем следующий код:

<div><div>Выравниванием содержимое по центру</div></div>

Обращаем ваше внимание на то, что в первом контейнере div для стилей добавлена еще спецификация height равная 100%. Тем самым мы указываем на то, что необходимо использовать именно высоту всей страницы.

Еще нужно обратить внимание на спецификацию vertical-align:middle. Дело в том, что если написать в заголовке html 5 документа по стандарту <!DOCTYPE HTML> вышеуказанный код перестает работать. Проблема решается указанием высоты для тэгов html и body. Причем для второго нужно указать не 100%, а несколько меньше, так как появляется вертикальная полоса прокрутки.

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

<!DOCTYPE HTML>
<html>
<head>
<style>
html { height: 100%; }
body { height: 95%; }
</style>
</head>
<body>
<div>
<div>Выравниванием содержимое по центру
</div></div>
</body>
</html>

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

При выравнивании объекта по центру часто нужно использовать внешние или внутренние отступы в html на css для его смещения.

 

Поделиться в соц. сетях:

Как горизонтально центрировать объект в другом

Как горизонтально центрировать

в другом

  1. Фрагменты
  2. ›
  3. CSS
  4. ›
  5. Как горизонтально центрировать
    в другом

HTML-тег

используется для определения частей страницы или документа. Он группирует большие разделы элементов HTML и стилизует их с помощью CSS.

Если вы хотите поместить элемент

в центр другого

, используйте стили CSS, чтобы расположить его точно в центре другого

по горизонтали.Следуйте инструкциям ниже и получите фрагмент кода.

Создать HTML¶

  • Создайте два элемента
    с атрибутами id с именами «outer-div» и «inner-div». Поместите второй

    в первый.
  

  
 Я горизонтально центрированный div.

Добавить CSS¶

  • Установить ширину внешнего элемента (т.е. 100% покрывает всю строку). Измените его в соответствии с вашими требованиями.
  • Установите для свойства поля значение «auto», чтобы горизонтально центрировать элемент
    на странице. «Маржа: 0 авто» выполняет фактическое центрирование.
  • Установите предпочтительные цвета для внешнего и внутреннего элементов
    с помощью свойства background-color.
  • Используйте значение «inline-block» свойства display, чтобы отобразить внутренний
    как встроенный элемент, а также как блок.
  • Установите свойство text-align для внешнего элемента
    , чтобы центрировать внутренний.Это свойство работает только со встроенными элементами.
  # outer-div {
  ширина: 100%;
  выравнивание текста: центр;
  цвет фона: # 0666a3
}

# inner-div {
  дисплей: встроенный блок;
  маржа: 0 авто;
  отступ: 3 пикселя;
  цвет фона: # 8ebf42
}

Вот полный код.

Пример горизонтального центрирования элемента

внутри другого с помощью свойства text-align: ¶
  

  
    <стиль>
      # outer-div {
        ширина: 100%;
        выравнивание текста: центр;
        цвет фона: # 0666a3
      }
      # inner-div {
        дисплей: встроенный блок;
        маржа: 0 авто;
        отступ: 3 пикселя;
        цвет фона: # 8ebf42
      }
    
  
  
    

      
 Я горизонтально центрированный div.

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

Результат

Я горизонтально центрированный div.

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

Пример горизонтального центрирования элемента

внутри другого с помощью свойства display: ¶
  

  
    <стиль>
      # main-container {
        дисплей: гибкий;
        ширина: 100%;
        justify-content: center;
        цвет фона: # 0666a3;
      }
      # main-container div {
        цвет фона: # 8ebf42;
        отступ: 10 пикселей;
      }
    
  
  
    

      
 Я горизонтально центрированный div со свойством отображения CSS.

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

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта. Принимаю

Как центрировать плавающие блоки в контейнере, Как центрировать плавающие блоки

Плавающие блоки в центре страницы

Div в центре экрана

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

Можно ли центрировать плавающие элементы?

Плавающий div по центру

Это старый вопрос. Вы можете перемещать влево или вправо, но в макете CSS нет возможности перемещать центр.

Размещение элемента DIV в центре экрана

Решить эту проблему несложно.

маржа: 0 авто;

В приведенном выше коде указано, что верхнее поле и нижнее поле установлены на 0, а левое поле и правое поле установлены на авто (автоматически).Здесь автоматические левое и правое поля выталкивают элемент в центр его контейнера.

Как отобразить div в центре экрана

Из рисунка выше вы можете понять, как он отображается в центре экрана.

маржа: 0 авто;

равно

маржа 0 авто 0 авто;

или можно написать так:

margin-top: 0;
маржа-право: авто;
нижнее поле: 0;
маржа слева: авто;

В следующем исходном коде показано, как центрировать Div в середине браузера.

Двухколоночная раскладка Div в центре экрана

Центральные плавающие блоки в контейнере

Исходный код

Позиция Div Точно по центру экрана

Центр div на странице по вертикали, центральный div на странице по горизонтали

Точно по центру означает, что Div горизонтально и практически по центру экрана.

Исходный код

Горизонтальные Div в центре браузера

Показать div в центре экрана

Исходный код

Трехколоночная раскладка Div в центре экрана

Поместите div в центр экрана

Исходный код

Как центрировать кнопку в CSS

CSS в основном используется для обеспечения наилучшего стиля веб-страницы HTML.Используя CSS, мы можем указать расположение элементов на странице.

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

  • text-align: center — путем установки значения свойства text-align родительского тега div в центр.
  • margin: auto — путем установки значения свойства margin на auto.
  • display: flex — путем установки значения свойства display как flex и значения свойства justify-content на center .
  • display: grid — путем установки значения свойства display для сетки.

Давайте разберемся с описанными выше методами с помощью некоторых иллюстраций.

Пример

В этом примере мы используем свойство text-align и устанавливаем его значение в центр .Его можно разместить в теге body или в родительском теге div элемента.

Здесь мы размещаем text-align: center; в родительском теге div элемента кнопки.





Кнопка выравнивания по центру
<стиль>
.контейнер{
выравнивание текста: центр;
граница: сплошной красный цвет 7 пикселей;
ширина: 300 пикселей;
высота: 200 пикселей;
padding-top: 100 пикселей;
}
#btn {
размер шрифта: 25 пикселей;
}



Проверить это сейчас

Выход

Пример

В этом примере мы используем display: grid; недвижимость и маржа: авто; недвижимость.Здесь мы размещаем дисплей : сетка; в родительском теге div элемента кнопки.

Кнопка разместится в центре горизонтального и вертикального положения.




Кнопка выравнивания по центру
<стиль>
.container {
ширина: 300 пикселей;
высота: 300 пикселей;
граница: 5 пикселей сплошной красный;
дисплей: сетка;
}
кнопка {
цвет фона: светло-голубой;
черный цвет;
размер шрифта: 25 пикселей;
маржа: авто;
}
п{
размер шрифта: 25 пикселей;
}


В этом примере мы используем display: grid; и margin: auto; свойства


Проверить это сейчас

Выход

Пример

Это еще один пример размещения кнопки в центре.В этом примере мы используем дисплей : flex; недвижимость, justify-content: center; свойство и align-items: center; недвижимость.

Этот пример поможет нам разместить кнопку в центре горизонтального и вертикального положения.




Кнопка выравнивания по центру
<стиль>
.container {
ширина: 300 пикселей;
высота: 300 пикселей;
граница: 5 пикселей сплошной красный;
дисплей: гибкий;
justify-content: center;
align-items: center;
}
кнопка {
цвет фона: светло-голубой;
черный цвет;
размер шрифта: 25 пикселей;
}



Проверить это сейчас

Выход

Как закрепить элемент в центре его родительского элемента

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

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

К счастью для нас, это на самом деле довольно просто с небольшой магией flexbox!

На родительском элементе все, что нам нужно сделать, это:

  1. настроить элемент родительского контейнера на использование flexbox
  2. центрировать его дочерние элементы по горизонтали с justify-content
  3. центрировать дочерние элементы по вертикали с align-items 
  .parent-container {
  дисплей: гибкий;
  justify-content: center;
  align-items: center;
}

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

  .child-canvas {
  гибкость-усадка: 0;
}

Вот пример, с которым вы можете поиграть:

 .parent {
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  justify-content: center;
  align-items: center;
  граница: 5px пунктирная # 6BD9ED;
}

.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкость-усадка: 0;
  граница: 5 пикселей пунктирная # A7E040;
}

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

 .parent {
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  justify-content: center;
  выровнять элементы: гибкий старт;
  граница: 5px пунктирная # 6BD9ED;
}

.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкость-усадка: 0;
  граница: 5 пикселей пунктирная # A7E040;
}

Или прикрепите его к нижнему левому краю:

 .parent {
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  justify-content: гибкий старт;
  выровнять элементы: гибкий конец;
  граница: 5px пунктирная # 6BD9ED;
}

.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкость-усадка: 0;
  граница: 5 пикселей пунктирная # A7E040;
}

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

 .parent {
  ширина: 200 пикселей;
  высота: 300 пикселей;
  дисплей: гибкий;
  justify-content: center;
  align-items: center;
  граница: 5px пунктирная # 6BD9ED;
}

.ребенок{
  ширина: 300 пикселей;
  высота: 400 пикселей;
  гибкость-усадка: 0;
  граница: 5 пикселей пунктирная # A7E040;
  положение: относительное;
  вправо: -15 пикселей
}

Теперь, когда вы знаете, как прикреплять элементы к их родительским элементам, вы можете легко центрировать макеты.Flexbox очень эффективен для этого и многих других потребностей пользовательского интерфейса. Flexbox Zombies раскрывает все в мельчайших (кровавых?) Деталях!

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

Центрировать Div, изображения, таблицы и списки внутри Div

Центрировать div на странице не так сложно, как вы думаете, вам нужно знать только некоторые важные правила, когда вы применяете CSS. Вы также можете центрировать некоторые другие важные элементы, такие как изображение, ul, table и даже div внутри div.

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

Общие правила CSS и общие проблемы

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

Не использовать float на элементах

Использование float на элементах внутри div, которые вы хотите центрировать, отключит свойство text-align , а ширина будет такой же, как у элементов внутри.Float также может нарушить стиль вашей страницы, если используется неправильно.

Автоматические поля с плавающей точкой и фиксированной шириной

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

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

Центр Div на странице (по горизонтали)

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

 


 









 Lorem ipsum dolor sit amet, conctetur adipisicing elit. Quas saepe porro nostrum!

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

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

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

Самый простой способ центрировать изображение в div, о котором, как мне кажется, все знают, — это добавить text-align: center в родительский контейнер.

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

 -------------------- HTML --------------------








 Lorem ipsum dolor sit amet, conctetur adipisicing elit. Quas saepe porro nostrum! 






--------------------- CSS ---------------------

.pageCenter {
маржа слева: авто;
маржа-право: авто;
максимальная ширина: 600 пикселей;
float: нет;
граница: сплошной красный 1px; / * Добавлена ​​красная рамка, чтобы лучше видеть div * /
}
/ * Раскомментируйте это, чтобы центрировать изображение как обычно, и удалите стили, примененные к изображению
.headerContainer {
выравнивание текста: центр;
}
* /
.headerContainer img {
дисплей: блок;
маржа: 0 авто;
ширина: авто;
}

Center Ul в Div

Чтобы центрировать список (ul) внутри div, все элементы (ul и li) должны иметь inline-block display , а ваш список должен находиться внутри контейнера с text-align : центр .Также не добавляйте плавающие элементы к элементам списка. Проверьте образец ниже.

 -------------------- HTML --------------------



--------------------- CSS ---------------------

.container {
выравнивание текста: центр;
граница: сплошной зеленый 1px;
}
.container ul {
граница: 2 пикселя сплошной красный;
дисплей: встроенный блок;
маржа: 10px 0;
отступ: 2 пикселя;
}
.container li {
дисплей: встроенный блок;
}
.container li a {
дисплей: встроенный блок;
фон: # 444;
цвет: #FFF;
отступ: 5 пикселей;
текстовое оформление: нет;
}

Центрировать таблицу в Div

Чтобы центрировать таблицу внутри div, вы должны либо добавить в таблицу атрибут align = «center» , либо добавить margin auto через CSS, поскольку таблицы уже имеют ширину По умолчанию для атрибута установлено значение auto.Если вы добавите 100% ширины, ваша таблица автоматически станет шире, чем его контейнер. Также text-align: center здесь не повлияет. У вас есть демонстрация ниже.

 -------------------- HTML --------------------







 Ячейка таблицы 
 Ячейка таблицы 
 Ячейка таблицы 




 Строка ячейки таблицы 2 
 Строка ячейки таблицы 2 
 Строка ячейки таблицы 2 







--------------------- CSS ---------------------

.container {
выравнивание текста: центр;
граница: сплошной зеленый 1px;
отступ: 5 пикселей;
}
.container table {
граница: сплошной красный 1px;
/ * Вы также можете раскомментировать это и удалить атрибут align = "center"
маржа: 0 авто;
* /
}

Центр Div внутри Div

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

Уловка с центральным div с абсолютной позицией состоит в том, чтобы установить для свойства left значение 50%, и , отрицательное поле слева, с половиной ширины вашего контейнера . Позвольте мне показать вам пример того, как мне очень просто центрировать div.

 -------------------- HTML --------------------



Lorem ipsum dolor sit amet, conctetur adipisicing elit. Voluptatem error, минус accusamus sed. Asperiores, repudiandae excepturi eius iste eaque saepe.

Этот центрированный контейнер имеет абсолютное положение с фиксированной шириной. Создано  HTML-TUTS.com .





--------------------- CSS ---------------------

.pageCenter {
маржа: 0 авто;
максимальная ширина: 500 пикселей;
положение: относительное;
граница: 1 пиксель сплошного коричневого цвета;
}
.absoluteContainer {
позиция: абсолютная;
осталось: 50%;
верх: 10 пикселей;
ширина: 200 пикселей;
маржа слева: -100 пикселей;
граница: сплошной красный 1px;
фон: #FFF;
}

Заключение

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

Как центрировать абсолютное деление на странице

Зедрик Майерс |
Опубликовано
30 июля 2015 г.

| Категории:

Веб-разработка

Нужно центрировать абсолютный div на странице?

Это простой фрагмент CSS, который автоматически центрирует абсолютное позиционирование div.Есть несколько способов, но эта полоса намного проще.

  .contentBlock {



width: {определить ширину}

позиция: абсолютная;

слева: 0;

справа: 0;

маржа слева: авто;

маржа-право: авто;



}

Недавние сообщения

Как брендовый голос и тон укрепляют связи с вашими учениками
Посмотреть эту историю

Устали от хаоса с открытым исходным кодом? Найдите баланс с фирменной CMS
Посмотреть эту историю

Центрирование встроенного блока с вертикальным выравниванием: по центру (CSS)

Свойства CSS display: inline-block и vertical-align: middle обеспечивают гибкий и удобный способ центрировать любой контент внутри

.Высоту

даже не нужно знать, и ее можно динамически определять по его содержимому.

Давайте сразу перейдем к делу и начнем с

Быстрый пример

Ура, я в центре синей области!

Нажмите, чтобы изменить высоту содержимого

Минимальная разметка и CSS:

  

  
  

      Ура, я в центре синей области!

У этого подхода есть несколько преимуществ:

  • Вам не нужно знать размеры центрируемых элементов.
  • CSS не обязательно знать размер .center-area .
  • Высота контейнера .container может определяться его содержимым, которое может изменяться динамически.
  • Разметка относительно чистая. Требуется только один вспомогательный элемент ( .center-area ).
  • Может вертикально выровнять более одного элемента рядом друг с другом.
  • Поддерживается всеми браузерами.

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

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

  
 :: до

Итак, между :: before и

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

Размер пространства также различается для разных шрифтов. Например, это 0,625em для Courier и 0,25em для Helvetica. Чтобы исключить это из уравнения, необходимо удалить пробел. Есть два варианта:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *