У веб развоју, кључно је правилно креирати изглед елемента. Међутим, многа својства ЦСС-а, као што је ЦСС3 Флекибле Бок, корисна су за прилагођавање изгледа веб страница и ХТМЛ елемената. Флексибилна кутија се користи за аранжирање веб страница и апликација на рекурзивни начин. Овај Флекбок режим помаже у креирању изгледа за сложене веб странице и апликације.
Овај пост ће вас упутити како да центрирате елемент див за све прегледаче који користе ЦСС вертикално.
Како поравнати див елемент користећи ЦСС?
Елемент див може бити вертикално поравнат коришћењем својства приказа „ флек “ заједно са ЦСС-ом “ алигн-итемс “ имовина и “ оправдати-садржај ' имовина. Својство „алигн-итемс“ поравнава елемент вертикално, а својство „јустифи-цонтент“ хоризонтално поравнава садржај.
Пример: Како вертикално центрирати див елемент помоћу ЦСС-а?
У ХТМЛ-у прво додајте „ <див> ” елемент и доделите му класу “ главни садржај ”. Између ознака „<див>“ додајте „ <имг> ” елемент са следећим атрибутима:
- “ срц ” атрибут се користи за одређивање УРЛ адресе слике.
- “ све ” атрибут дефинише неки текст који ће се приказати уместо слике ако се не учита.
- “ ширина ” атрибут се користи за подешавање ширине слике.
- Затим додајте „ <п> ” елемент да бисте уградили пасус на страницу.
Ево ХТМЛ кода:
< див класа = 'главни садржај' >< имг срц = '/имагес/лаптоп-нотепад.јпг' све = 'Лаптоп са нотесом и оловком' ширина = '300' >
< стр > Лаптоп је такође познат преносиви рачунар као нотебоок рачунар. стр >
див >
У ЦСС-у ћемо навести неколико својстава стила за див.
Класа „главног садржаја“ стила
.главни садржај {висина: педесет % ;
боја позадине: #46Ц2ЦБ;
фонт-сизе: 24пк;
паддинг: 10пк;
}
Следећа ЦСС својства су дефинисана у „ главни садржај ' класа:
- “ висина ” својство се користи за подешавање висине <див> контејнера.
- “ боја позадине ” дефинише боју позадине елемента.
- “ фонт-сизе ” одређује величину фонта елемента.
- “ паддинг ” својство поставља простор око садржаја елемента.
Из излаза можете приметити да садржај елемента див није у центру:
Идемо даље да применимо ЦСС својства која помажу да се центрира „ <див> ” елемент вертикално. Додајте ова својства класи “ главни садржај ” који се користе за приступ елементу <див>:
приказ: флек ;алигн-итемс: центар;
Ево описа:
- “ приказ ' имовина ' флек ” се користи да би изглед див учинио флексибилним за његов елемент.
- “ алигн-итемс ” ЦСС својство је постављено као “ центар ”, који ће вертикално поравнати елементе див.
Излаз
Научили сте како да центрирате елемент див вертикално за све прегледаче који користе ЦСС.
Закључак
Да бисте вертикално центрирали див елемент, ЦСС “ приказ “ имовина се користи са “ флек ” вредност. Ова вредност чини контејнер <див> флексибилним за његове елементе. Да бисте вертикално поравнали див елемент, подесите „ алигн-итемс “ својство и доделите му “ центар ” вредност. Овај блог вам је показао како да користите ЦСС за вертикално центрирање див елемената у свим претраживачима.