Овладавање Див поравнањем помоћу ЦСС-а
Хоризонтално центрирање елемената у ЦСС-у је уобичајен задатак са којим се сусрећу веб програмери. Било да се ради о поравнавању дугмета, слике или дива, постизање савршеног поравнања понекад може бити тешко. У овом водичу ћемо истражити различите методе за хоризонтално центрирање а
Разумевањем и применом ових техника можете осигурати да су ваши веб елементи позиционирани тачно тамо где желите. Покрићемо различите приступе, укључујући флекбок, грид и традиционалне методе, да бисмо вам пружили свеобухватно разумевање ове суштинске ЦСС вештине.
| Цомманд | Опис |
|---|---|
| display: flex; | Дефинише флекс контејнер и омогућава изглед флексбокса. |
| justify-content: center; | Центрира ставке хоризонтално унутар флексибилног контејнера. |
| align-items: center; | Центрира ставке вертикално унутар флексибилног контејнера. |
| place-items: center; | Центрира ставке и хоризонтално и вертикално у решеткастом контејнеру. |
| transform: translate(-50%, -50%); | Помера елемент за 50% сопствене ширине и висине да би га центрирао. |
| position: absolute; | Позиционира елемент у односу на његовог најближег позиционираног претка. |
| top: 50%; | Позиционира елемент 50% од врха елемента који садржи. |
| left: 50%; | Позиционира елемент 50% лево од елемента који га садржи. |
Центрирање елемената помоћу Флекбок-а, Грид-а и традиционалног ЦСС-а
Прва скрипта показује како центрирати а
У другом сценарију користимо CSS Grid за постизање сличних резултата. Применом display: grid; у родитељски контејнер и place-items: center;, подређени елементи су центрирани и хоризонтално и вертикално. Овај метод је посебно користан за распореде засноване на мрежи. Коначно, традиционална метода укључује постављање position: absolute; на подређеном елементу и коришћење top: 50%; и left: 50%; са transform: translate(-50%, -50%); да га центрира унутар родитеља. Овај приступ је ефикасан за елементе фиксне величине.
Коришћење Флекбок-а за хоризонтално центрирање Див
ХТМЛ и ЦСС са Флекбок-ом
<!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>
Напредне технике за центрирање елемената
Други метод за хоризонтално центрирање елемената унутар контејнера укључује коришћење text-align: center; имовина. Овај приступ је посебно ефикасан за инлине-блок или инлине елементе. Применом text-align: center; у родитељски контејнер, сви подређени елементи ће бити центрирани хоризонтално. Међутим, овај метод не функционише за елементе на нивоу блока осим ако се не конвертују у инлине блок.
Поред тога, можете користити margin: auto; својство за центрирање елемената на нивоу блока. Постављањем леве и десне маргине елемента на ауто, можете га хоризонтално центрирати унутар његовог надређеног контејнера. Ова техника је једноставна и добро функционише за елементе фиксне ширине. Комбиновање ових метода са модерним техникама ЦСС изгледа као што су Флекбок и Грид пружа свеобухватан сет алата за поравнавање елемената тачно по потреби.
Уобичајена питања и одговори о елементима за центрирање
- Како да центрирам уметнути елемент?
- Користите text-align: center; на родитељском контејнеру да центрира уметнуте елементе.
- Могу ли да користим маргину: ауто; центрирати блок елемент?
- Да, подешавање margin: auto; на левој и десној страни ће центрирати блок елемент.
- Која је разлика између Флекбок-а и Грид-а за центрирање?
- Flexbox се користи за једнодимензионалне распореде, док Grid је за дводимензионалне распореде.
- Како да центрирам елемент фиксне ширине помоћу ЦСС-а?
- Користи margin: auto; или position: absolute; са transform: translate(-50%, -50%);
- Могу ли да центрирам елементе вертикално помоћу Флекбок-а?
- Да, користите align-items: center; да центрирате елементе вертикално у флекс контејнеру.
- Поравнава текст: центар; рад за блок елементе?
- Не, text-align: center; ради само за инлине или инлине-блок елементе.
- Како да центрирам више елемената у контејнеру?
- Користите display: flex; са justify-content: center; и align-items: center;
- Шта је место-ставке: центар; у Грид?
- place-items: center; центрира ставке и хоризонтално и вертикално у решеткастом контејнеру.
- Да ли је могуће центрирати елементе без Флекбок-а или Грид-а?
- Да, користећи методе као што су margin: auto;, text-align: center;, или position: absolute; могу и центрирати елементе.
Завршавање ЦСС техника центрирања
Разумевање како хоризонтално центрирати елементе користећи различите ЦСС методе је од суштинског значаја за креирање визуелно привлачних веб изгледа. Савладавањем техника као Flexbox, Grid, и traditional CSS својства, програмери могу осигурати да су њихови дизајни функционални и естетски угодни. Експериментисање са овим методама пружиће дубље разумевање ЦСС могућности.