Како хоризонтално центрирати

Mia Chevalier

недеља, 16. јун 2024. 02:43:41

Овладавање Див поравнањем помоћу ЦСС-а

Хоризонтално центрирање елемената у ЦСС-у је уобичајен задатак са којим се сусрећу веб програмери. Било да се ради о поравнавању дугмета, слике или дива, постизање савршеног поравнања понекад може бити тешко. У овом водичу ћемо истражити различите методе за хоризонтално центрирање а

унутар другог

користећи ЦСС.

Разумевањем и применом ових техника можете осигурати да су ваши веб елементи позиционирани тачно тамо где желите. Покрићемо различите приступе, укључујући флекбок, грид и традиционалне методе, да бисмо вам пружили свеобухватно разумевање ове суштинске ЦСС вештине.

Цомманд	Опис
display: flex;	Дефинише флекс контејнер и омогућава изглед флексбокса.
justify-content: center;	Центрира ставке хоризонтално унутар флексибилног контејнера.
align-items: center;	Центрира ставке вертикално унутар флексибилног контејнера.
place-items: center;	Центрира ставке и хоризонтално и вертикално у решеткастом контејнеру.
transform: translate(-50%, -50%);	Помера елемент за 50% сопствене ширине и висине да би га центрирао.
position: absolute;	Позиционира елемент у односу на његовог најближег позиционираног претка.
top: 50%;	Позиционира елемент 50% од врха елемента који садржи.
left: 50%;	Позиционира елемент 50% лево од елемента који га садржи.

Центрирање елемената помоћу Флекбок-а, Грид-а и традиционалног ЦСС-а

Прва скрипта показује како центрирати а

Користећи . Постављањем на родитељском контејнеру, подређени елементи постају флек ставке. Тхе својина центрира ове ставке хоризонтално, док align-items: center; центрира их вертикално. Овај метод је веома свестран и добро функционише за динамичке распореде.

У другом сценарију користимо за постизање сличних резултата. Применом у родитељски контејнер и , подређени елементи су центрирани и хоризонтално и вертикално. Овај метод је посебно користан за распореде засноване на мрежи. Коначно, традиционална метода укључује постављање position: absolute; на подређеном елементу и коришћење и са да га центрира унутар родитеља. Овај приступ је ефикасан за елементе фиксне величине.

Коришћење Флекбок-а за хоризонтално центрирање Див

ХТМЛ и ЦСС са Флекбок-ом

<!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>

Центрирање Див са ЦСС мрежом

ХТМЛ и ЦСС са распоредом мреже

<!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>

Традиционални метод за центрирање са ЦСС-ом

ХТМЛ и ЦСС са Маргин Ауто

<!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>

Напредне технике за центрирање елемената

Други метод за хоризонтално центрирање елемената унутар контејнера укључује коришћење имовина. Овај приступ је посебно ефикасан за инлине-блок или инлине елементе. Применом у родитељски контејнер, сви подређени елементи ће бити центрирани хоризонтално. Међутим, овај метод не функционише за елементе на нивоу блока осим ако се не конвертују у инлине блок.

Поред тога, можете користити својство за центрирање елемената на нивоу блока. Постављањем леве и десне маргине елемента на ауто, можете га хоризонтално центрирати унутар његовог надређеног контејнера. Ова техника је једноставна и добро функционише за елементе фиксне ширине. Комбиновање ових метода са модерним техникама ЦСС изгледа као што су Флекбок и Грид пружа свеобухватан сет алата за поравнавање елемената тачно по потреби.

Како да центрирам уметнути елемент?
Користите на родитељском контејнеру да центрира уметнуте елементе.
Могу ли да користим маргину: ауто; центрирати блок елемент?
Да, подешавање на левој и десној страни ће центрирати блок елемент.
Која је разлика између Флекбок-а и Грид-а за центрирање?
се користи за једнодимензионалне распореде, док је за дводимензионалне распореде.
Како да центрирам елемент фиксне ширине помоћу ЦСС-а?
Користи или са
Могу ли да центрирам елементе вертикално помоћу Флекбок-а?
Да, користите да центрирате елементе вертикално у флекс контејнеру.
Поравнава текст: центар; рад за блок елементе?
Не, ради само за инлине или инлине-блок елементе.
Како да центрирам више елемената у контејнеру?
Користите са и
Шта је место-ставке: центар; у Грид?
центрира ставке и хоризонтално и вертикално у решеткастом контејнеру.
Да ли је могуће центрирати елементе без Флекбок-а или Грид-а?
Да, користећи методе као што су , , или могу и центрирати елементе.

Завршавање ЦСС техника центрирања

Разумевање како хоризонтално центрирати елементе користећи различите ЦСС методе је од суштинског значаја за креирање визуелно привлачних веб изгледа. Савладавањем техника као , , и својства, програмери могу осигурати да су њихови дизајни функционални и естетски угодни. Експериментисање са овим методама пружиће дубље разумевање ЦСС могућности.

Како хоризонтално центрирати Див користећи ЦСС