• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Горизонтальное центрирование элемента на CSS (Центрирование в CSS: полное руководство по выравниванию)
Горизонтальное центрирование элемента на CSS
Kosten
Дата: Вторник, 2018-07-03, 21:09 | Сообщение 1
Администраторы
Сообщений:18469
Награды: 55


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

Если вы отрегулируете высоту линии до 3em, вы увидите, как сдвиг текста останется вертикально по центру. Попробуйте 4em, затем 5em. Это всего лишь один из многих методов, который можно применить. Мне это больше нравится, потому что это просто и соответствует цели.



HTML

Код
<ul class="sirection-wind">
  <li><a>ZORNET</a></li>
  <li><a>ZORNET</a></li>
  <li><a>ZORNET</a></li>
  <li><a>ZORNET</a></li>
</ul>


CSS

Код
ul.sirection-wind {
    margin: 0 auto;
    text-align: center;
}
ul.sirection-wind li {
    display: inline-block;
    height: 2em;
}
ul.sirection-wind a {
    display: block;
    width: 5em;
    line-height: 2em;
    background-color: #214e73;
    border-radius: 5px;
    border: 1.9px solid #b9b2b2;
    color: #fbf8f7;
}
ul.sirection-wind a:hover {
    color: #f9f7f6;
    background-color: #1d8031;
    cursor: pointer;
}


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

Демонстрация
Прикрепления: 6635251.png(3.7 Kb)
Страна: (RU)
Slavik
Дата: Среда, 2018-07-04, 01:57 | Сообщение 2
Гл. Модератор
Сообщений:1752
Награды: 4


Полезно!, новичкам всегда пригодиться! 09a

MIR-HACK.RU - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Дата: Четверг, 2018-07-05, 21:19 | Сообщение 3
Администраторы
Сообщений:18469
Награды: 55


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

Этот метод работает во всех современных браузерах - IE10 +, Chrome, Firefox и Safari с -webkit префиксомэ



Быстрый совет: простой способ центрирования элементов по вертикали и горизонтали.

HTML

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

Код
<div class="container">
    <img src="Ссылка на изображение" alt="zornet.tu">
</div>


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

CSS

Как мы говорили ранее, мы будем использовать только три строки кода.

Код
.container{
    display: flex;
    justify-content: center;
    align-items: center;
}


Каждый гибкий контейнер имеет две оси для позиционирования элементов. Основная ось объявляется с flex-direction свойством может быть row или column. Опустив это правило, мы оставили направление гибкости по умолчанию row.

Теперь все, что нам нужно сделать, - это центрировать обе оси. Это не могло быть проще:

- Сделайте тип отображения flex, чтобы мы активировали режим flexbox.
- justify-content определяет, где элементы гибкости будут выровняться в соответствии.
- align-items делает то же самое с-осью, перпендикулярной основной, где вертикально в нашем случае.

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

Вывод

Существует множество других методов для центрирования контента с помощью CSS, но flexbox делает это намного проще и элегантнее.

Демонстрация
Прикрепления: 7865590.png(26.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Горизонтальное центрирование элемента на CSS (Центрирование в CSS: полное руководство по выравниванию)
  • Страница 1 из 1
  • 1
Поиск: