Як горизонтально відцентрувати

Mia Chevalier

неділя, 16 червня 2024 р. о 03:00:33

Освоєння вирівнювання Div за допомогою CSS

Центрування елементів по горизонталі в CSS є поширеним завданням, з яким стикаються веб-розробники. Будь то вирівнювання кнопки, зображення чи div, досягнення ідеального вирівнювання іноді може бути складним. У цьому посібнику ми розглянемо різні методи горизонтального центрування a

в межах іншого

за допомогою CSS.

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

Команда	опис
display: flex;	Визначає контейнер flex і вмикає макет flexbox.
justify-content: center;	Центрує елементи горизонтально всередині гнучкого контейнера.
align-items: center;	Центрує елементи вертикально всередині гнучкого контейнера.
place-items: center;	Центрує елементи як горизонтально, так і вертикально в контейнері сітки.
transform: translate(-50%, -50%);	Зміщує елемент на 50% його ширини та висоти, щоб відцентрувати його.
position: absolute;	Розміщує елемент відносно його найближчого предка.
top: 50%;	Розміщує елемент на 50% від верхньої частини елемента, що його містить.
left: 50%;	Розміщує елемент на 50% ліворуч від елемента, що його містить.

Центрування елементів за допомогою Flexbox, Grid і традиційного CSS

Перший сценарій демонструє, як центрувати a

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

У другому скрипті ми використовуємо для досягнення аналогічних результатів. Звернувшись до батьківського контейнера і , дочірні елементи відцентровані як горизонтально, так і вертикально. Цей метод особливо корисний для макетів на основі сітки. Нарешті, традиційний метод передбачає встановлення position: absolute; на дочірньому елементі та використання і з щоб центрувати його в межах батьківського. Цей підхід ефективний для елементів фіксованого розміру.

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

HTML і CSS з Flexbox

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Центрування Div за допомогою CSS Grid

HTML і CSS із макетом сітки

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Традиційний метод центрування за допомогою CSS

HTML і CSS з автоматичним відступом

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Передові методи центрування елементів

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

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

Як відцентрувати вбудований елемент?
використання на батьківському контейнері, щоб відцентрувати вбудовані елементи.
Чи можна використовувати margin: auto; центрувати елемент блоку?
Так, настройка ліворуч і праворуч центруватиме блоковий елемент.
Яка різниця між Flexbox і Grid для центрування?
використовується для одновимірних макетів, при цьому призначений для двовимірних макетів.
Як центрувати елемент фіксованої ширини за допомогою CSS?
використання або з
Чи можу я центрувати елементи вертикально за допомогою Flexbox?
Так, використовувати центрувати елементи вертикально у гнучкому контейнері.
Вирівнює текст по центру; роботи для блокових елементів?
Немає, працює лише для елементів inline або inline-block.
Як відцентрувати кілька елементів у контейнері?
використання з і
Що таке place-items: центр; в Grid?
центрує елементи як горизонтально, так і вертикально в контейнері сітки.
Чи можна центрувати елементи без Flexbox або Grid?
Так, використовуючи такі методи, як , , або також може центрувати елементи.

Підсумок методів центрування CSS

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

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