Овај чланак показује како вертикално поравнати текст унутар флексбокса:
Метод 1: Коришћење својства “алигн-итем”.
За вертикално поравнање текста, корисници могу да користе „ алигн-итем ” својство које обезбеђује ЦСС. Помаже елементима да поставе своје поравнање унутар флекбок-а. Могуће позиције вертикалног поравнања могу бити на „ топ ”, средњи ”, или „ дно ” страна.
Практичне демонстрације за поравнавање елемената у овим правцима су наведене у наставку:
Пример 1: Горња позиција
Да бисте поравнали текст унутар флексбокса на горњој позицији, „ флек-старт ” вредност је обезбеђена за „ алигн-итемс ' имовина. Ово својство је додељено главном див-у који ће бити приказан као флек. Претпоставимо, див са класом „ вертикала ” се креира у ХТМЛ датотеци. Затим у ЦСС датотеци изаберите ту класу и доделите следећа својства:
.вертикала {
боја : бео ;
висина : 150пк ;
приказ : флек ;
паддинг-лево : 20пк ;
алигн-итемс : флек-старт ;
боја позадине : шумски зелено ;
}
- Прво, основни стил и поравнање се дају диву користећи својства боје, боје позадине и висине ЦСС-а.
- Својство „дисплаи“ је такође подешено на „флек“ да би се учинило флексбоксом.
- На крају, да бисте приказали текст на почетку флекбок-а, подесите својство „алигн-итемс“ на „флек-старт.
Након извршавања горњег кода, веб страница изгледа овако:
Излаз показује да је текст сада поравнат на горњој позицији унутар флекбок-а.
Пример 2: Средња позиција
Да бисте вертикално поравнали текст на средњој позицији, поставите „ центар ” вредност за ЦСС “ алигн-итемс ' имовина:
.вертикала {боја : бео ;
висина : 150пк ;
приказ : флек ;
паддинг-лево : 20пк ;
алигн-итемс : центар ;
боја позадине : шумски зелено ;
}
Након извршења горњег кода:
Горњи излаз показује да је текст сада поравнат у центру флексбокса.
Пример 3: Доња позиција
Да бисте поставили текст на дну флексбокса, доделите „ флек-енд ” вредност за „ алигн-итемс ' имовина. Овај пут се текст поравнава на позицији где се флексбокс завршава значи на доњој страни:
.вертикала {боја : бео ;
висина : 150пк ;
приказ : флек ;
паддинг-лево : 20пк ;
алигн-итемс : флек-енд ;
боја позадине : шумски зелено ;
}
Након извршавања горњег кода, веб страница изгледа овако:
Горњи излаз показује да је текст сада вертикално поравнат у доњем положају.
Метод 2: Коришћење својства „јустифи-цонтент“.
„ оправдати-садржај ” својство се такође може користити за вертикално поравнавање текста унутар флекбок-а. Међутим, функционише исто као и „ Поравнање текста ” и поравнава елементе у правцу реда. Дакле, да бисте променили смер поравнања, „ флек-дирецтион ” својство се користи за подешавање „ оправдати-садржај “ поравнање према “ колона ' правац:
.вертикала {висина : 150пк ;
приказ : флек ;
паддинг-лево : 20пк ;
боја : бео ;
боја позадине : даркциан ;
флек-дирецтион : колона ;
оправдати-садржај : флек-енд ;
}
Објашњење горњег кода је дато у наставку:
- „ висина ”, “ боја ' и ' паддинг-лево ” својства функционишу исто као и горњи метод.
- Након тога, поставите „ колона ” вредност за „ флек-дирецтион ” флекбок-а за примену стилова кроз колоне.
- Након тога, „ оправдати-садржај ” својство поравна текст вертикално.
- На крају, „ флек-енд ” вредност поравнава елемент на „ дно ” страна.
Белешка : Корисници такође могу да подесе „ флек-старт ' и ' центар ” вредности за „ топ ', и ' средњи ” стране, респективно.
На пример, након извршавања горњег кода, веб страница изгледа овако:
Горњи излаз показује да је текст поравнат на дну флекбок-а.
Закључак
Да бисте вертикално поравнали текст унутар флексбокса, „ алигн-итемс ' и ' оправдати-садржај ” ЦСС својства се могу користити. Оба ова својства добијају „ флек-старт ”, “ центар ” или “ флек-енд ” вредности за поравнавање текста на „ топ ”, “ средњи ' и ' дно ” правци унутар флекбок-а, респективно. Овај чланак је демонстрирао вертикално поравнање текста у флексбоксу.