ZorNet.Ru — сайт для вебмастера » HTML и CSS » Способы выравнивания элементов на CSS

Способы выравнивания элементов на CSS

В материале рассмотрим 5 самых популярных способов и вариантов по вертикальному и горизонтальному выравниванию элемента при помощи HTML и CSS. Так как в старые добрые времена ограничения CSS были таковы, что даже такие на вид простые вещи, как вертикальное центрирование, что создавали проблемы, что даже при этом некоторые из нас полагались на решения JavaScript.

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

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

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

flex-start: элементы выравниваются по верху контейнера.
flex-end: элементы выровнены по дну контейнера.
center: элементы выравниваются в вертикальном центре контейнера.
baseline: элементы отображаются на базовой линии контейнера.
stretch: элементы растягиваются, чтобы соответствовать контейнеру.

Это CSS-свойство justify-content, которое выравнивает элементы по горизонтали и принимает следующие значения:

flex-start: элементы выравниваются по левой стороне контейнера.
flex-end: элементы выровнены по правой стороне контейнера.
center: элементы выравниваются в центре контейнера.
space-between: элементы отображаются с одинаковым интервалом между ними.
space-around: элементы отображаются с одинаковым интервалом вокруг них.

5 способов выравнивания HTML-элементов горизонтально и вертикально

1 Вариант:

HTML

Код

<div class="cedsanulodas">
<span class="kigesav">Я вертикально / горизонтально центрирован!</span>
</div>

CSS

Код

.cedsanulodas{
  height: 200px;
  width: 400px;
  background: lightgray;
  text-align: center;
}
.cedsanulodas > .kigesav {
  line-height: 200px;
}

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

Демонстрация

2 Вариант:

HTML

Код

<div class="Lasunu-dsanokad">
<span>Я вертикально / горизонтально центрирован!</span>
</div>

CSS

Код

.Lasunu-dsanokad {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

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

Демонстрация

3 Вариант:

HTML

Код

<div class="masxequh-koitunbsa">
<p>Я вертикально / горизонтально центрирован!</p>
</div>

CSS

Код

html, body, .masxequh-koitunbsa {
  height: 100%;
}
.masxequh-koitunbsa {
  position: relative;
  text-align: center;
}
.masxequh-koitunbsa > p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -9px;
}

Здесь нужно присвоить дочернему элементу position:absolute и сверху подвинуть его на 50%, относительно родительского, а также нужно сделать отрицательный отступ от верха, на половину высоты элемента.

Демонстрация

4 Вариант:

HTML

Код

<div class="gtedopun-acomugad"> <span>Я вертикально / горизонтально по центру!</span>
</div>

CSS

Код

html, body, .gtedopun-acomugad {
  height: 100%;
}
.gtedopun-acomugad {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}

Для выравнивания элементов можно присвоить свойство display:flex и использовать align-items: center и justify-content: center для вертикального и горизонтального центрирования

Демонстрация

5 Вариант:

HTML

Код

<section class="gsantresa-kipoladun">
<div class="detukopas">Я вертикально / горизонтально по центру!</div>
</section>

CSS

Код

html, body {
  height: 100%;
}
.gsantresa-kipoladun {
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
}
.gsantresa-kipoladun > .detukopas {
  display: table-cell;
  vertical-align: middle;
}

Для вертикального выравнивания присвойте свойствам width и height родительского элемента значение 100% и добавьте display: table. В дочернем элементе измените значение display на table-cell и добавьте vertical-align: middle.

Демонстрация

Для горизонтального выравнивания текста и других inline-элементов можно либо использовать text-align: center, либо margin: 0 auto, если вы имеете дело с блоковым элементом.

В некоторых случаях вам будет нужно убедиться, что высота элемента html/body равна 100% процентам.

Где также для выравнивание по горизонтальному тексту и других inline-элементов можно задействовать text-align: center, либо margin: 0 auto, если вы имеете дело с блоковым элементом.

19 Апреля 2019 Просмотров: 1124 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0