Центрування тексту по вертикалі в Div за допомогою CSS

Центрування тексту по вертикалі в Div за допомогою CSS
Центрування тексту по вертикалі в Div за допомогою CSS
Alice Dupont
субота, 13 липня 2024 р. о 22:28:54

Вертикально центрувати текст усередині Div за допомогою CSS

Вирівнювання тексту по вертикалі всередині div може бути поширеною проблемою у веб-дизайні. Забезпечення ідеального центрування тексту може покращити естетику та читабельність вашого вмісту.

У цій статті ми розглянемо різні методи досягнення вертикального центрування тексту всередині div за допомогою CSS. Ми почнемо з простого прикладу, а потім розглянемо більш просунуті методи, щоб забезпечити сумісність у різних браузерах і пристроях.

Команда опис
display: flex; Визначає гнучкий контейнер, що дозволяє використовувати макет flexbox.
justify-content: center; Горизонтально центрує елементи Flex у контейнері Flex.
align-items: center; Вертикально центрує елементи Flex у контейнері Flex.
display: grid; Визначає контейнер сітки, що дозволяє використовувати макет сітки.
place-items: center; Центрує елементи як горизонтально, так і вертикально в контейнері сітки.
display: table; Визначає елемент як таблицю, що дозволяє застосовувати властивості макета таблиці.
display: table-cell; Визначає елемент як клітинку таблиці, увімкнувши властивості вертикального вирівнювання.
vertical-align: middle; Вертикально центрує вміст у елементі клітинки таблиці.
line-height: 170px; Встановлює висоту рядка, що дорівнює висоті контейнера для вертикального центрування тексту.

Методи центрування тексту по вертикалі за допомогою CSS

У першому прикладі сценарію ми використовуємо display: flex; щоб визначити гнучкий контейнер. Це дозволяє використовувати властивості макета Flexbox. За установкою justify-content: center; і align-items: center;, ми можемо горизонтально та вертикально відцентрувати текст у межах

елемент. Цей метод дуже ефективний і простий у застосуванні, що робить його популярним вибором для сучасного веб-дизайну. Flexbox особливо корисний завдяки своїй швидкодії та простоті вирівнювання, що дозволяє розробникам створювати макети, які добре адаптуються до різних розмірів екрана та орієнтації.

Другий приклад сценарію використовує макет CSS Grid за допомогою display: grid;. За установкою place-items: center;, текст центрується як горизонтально, так і вертикально в контейнері сітки. CSS Grid пропонує більш потужну та гнучку систему для розробки веб-макетів порівняно з традиційними методами. Він надає можливість легко створювати складні адаптивні дизайни. The place-items: center; Команда — це стислий спосіб досягнення вертикального та горизонтального центрування, спрощення коду та покращення читабельності.

Розширені методи CSS для вертикального центрування

У третьому сценарії ми використовуємо метод відображення таблиці. Налаштування display: table; на контейнер і display: table-cell; на псевдоелемент, створений за допомогою ::before дозволяє нам використовувати vertical-align: middle; власність. Цей метод імітує поведінку клітинок таблиці, дозволяючи вертикально центрувати вміст. Хоча цей підхід рідше використовується в сучасному веб-дизайні, він може бути корисним для підтримки сумісності зі старими браузерами або при роботі зі застарілим кодом. Це забезпечує надійний спосіб центрування вмісту, не покладаючись на новіші системи компонування.

Четвертий приклад сценарію використовує line-height власність. Встановивши line-height дорівнює висоті контейнера, текст вертикально по центру. Цей прийом простий і ефективний для однорядкового тексту. Однак він може не підходити для багаторядкового тексту або динамічного вмісту, де висота контейнера може змінюватися. Незважаючи на свої обмеження, line-height Метод є швидким і простим рішенням для вертикального центрування тексту в простих сценаріях.

Використання Flexbox для вертикального центрування

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Використання сітки для вертикального центрування

Сітка CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Використання табличного відображення для вертикального центрування

Відображення таблиці CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Використання висоти лінії для вертикального центрування

Висота рядка CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Вивчення CSS Transform для вертикального центрування

Ще один ефективний метод вертикального центрування тексту в межах a div використовує CSS transform власність. Шляхом комбінування position: absolute; з transform: translateY(-50%);, ми можемо досягти точного вертикального вирівнювання. По-перше, div встановлено на position: relative; виступати в якості орієнтира. Потім дочірній елемент з position: absolute; розташовано у верхніх 50% батьківського контейнера. Нарешті, подача заявки transform: translateY(-50%); переміщує елемент вгору на половину його власної висоти, ідеально центруючи його по вертикалі.

Цей метод забезпечує велику гнучкість і добре працює для різних типів вмісту, включаючи текст і зображення. Це особливо корисно під час роботи з динамічним вмістом, оскільки ефект центрування залишається незмінним незалежно від висоти вмісту. Додатково комбінування transform з іншими властивостями CSS дозволяє створювати складніші та креативніші дизайни макетів. Хоча цей підхід вимагає трохи більше коду порівняно з Flexbox або Grid, він пропонує точний контроль над розташуванням елементів.

Поширені запитання щодо вертикального центрування в CSS

  1. Який найпростіший спосіб вертикального центрування тексту в div?
  2. Використання display: flex; з justify-content: center; і align-items: center; часто є найпростішим і найефективнішим методом.
  3. Як вертикально відцентрувати текст у старих браузерах?
  4. Використовуючи табличний метод відображення с display: table; і vertical-align: middle; може допомогти досягти вертикального центрування в старих браузерах.
  5. Чи можна використовувати CSS Grid для центрування тексту по вертикалі?
  6. Так, CSS Grid може центрувати текст вертикально за допомогою display: grid; і place-items: center;.
  7. Чи можна вертикально центрувати багаторядковий текст?
  8. Так, за допомогою Flexbox або CSS Grid можна легко відцентрувати багаторядковий текст вертикально всередині контейнера.
  9. Як вертикально відцентрувати текст із відомою висотою контейнера?
  10. Ви можете встановити line-height властивість відповідати висоті контейнера, ефективно центруючи текст.
  11. Що робити, якщо висота контейнера динамічна?
  12. За допомогою Flexbox, Grid або transform властивість забезпечує послідовне вертикальне центрування навіть при динамічній висоті контейнера.
  13. Чи є недоліки у використанні transform: translateY(-50%);?
  14. Незважаючи на те, що він ефективний, він вимагає від батьків position: relative; і може бути трохи складнішим у реалізації порівняно з Flexbox або Grid.
  15. Як вертикально відцентрувати текст у адаптивному дизайні?
  16. Використання Flexbox або CSS Grid настійно рекомендується для адаптивних дизайнів, оскільки вони добре адаптуються до різних розмірів екрана та орієнтації.

Останні думки щодо вертикального центрування

Досягти вертикального центрування тексту всередині div можна кількома ефективними методами. Сучасні технології, такі як Flexbox і Grid, пропонують найбільшу гнучкість і легкість впровадження. Старіші методи, такі як табличне відображення та висота лінії, все ще можуть бути корисними в окремих випадках. Розуміючи та застосовуючи ці різні підходи, розробники можуть переконатися, що їх вміст буде візуально привабливим і належним чином узгоджено для різних пристроїв і браузерів.