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