6 ЦСС трикови за вертикално поравнавање садржаја

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

Међутим, ови трикови могу имати ограничења и можда ћете морати користити више од једног трика да заврши илузију. Ако знате за било који други трик, јавите нам у коментарима.

1. Користите апсолутно позиционирање

Први трик који ћемо видети овде користи позицију својство. Имате два

, један је контејнер, други је дечији елемент који садржи садржај.

Прво ћемо поставити позицију елемента контејнера на релативну, а затим поставити позицију дечијег елемента на апсолутно. То нам омогућава да га слободно поставимо преко контејнера.

Да бисте га поравнали вертикално, померите положај детета са врха, за половину висине контејнера, и повуците га за половину ширине дјечјег елемента. Ево излаза:

Овај трик је савршен када постоји само један елемент за дете, иначе апсолутно положај ће утицати на други елемент унутар истог контејнера.

2. Користите ЦСС3 Трансформ

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

Под претпоставком да имамо исту ХТМЛ структуру као и претходни метод - један родитељ, један подређени елемент - 50% од врха и користећи ЦСС трансформацију даје превод -50%. И ево га.

Имајте на уму да ЦСС3 Трансформс неће радити у Интернет Екплореру 8 и ниже. Можда желите да користите било који други метод као резервну.

3. Користите Паддинг

Можемо такође користити паддинг створити илузију вертикалног поравнања. Да бисте то урадили, једноставно подесите горњу и доњу подлогу на следећи начин:

Овај трик је погодан када не поставите контејнер у фиксну ширину, само подесите ширину на ауто.

4. Користите висину линије

Ако имате само једну линију текстуалног садржаја унутар контејнера, можете поравнати текст вертикално користећи Висина линија својство. Подесите Висина линија вредност за отприлике исто као висина контејнера, и видећете следећи излаз.

Запамтите да овај трик ради само са једном линијом текста. Ако се садржај разбије на две или више линија, простор између сваке линије би био онакав какав смо навели у Висина линија, даје нам превише простора.

5. Користите ЦСС табелу

Лично, коришћење ЦСС Табле је мој омиљени трик за примену вертикалног поравнања. Ради у старим прегледачима као што је Интернет Екплорер 8. Овај метод се врши постављањем приказа елемента контејнера сто, док се подређени елемент приказује као табле-целл затим користите вертицал-алигн својство да центрира текст вертикално.

6. Користите Флекбок

Последњи метод за вертикално центрирање је коришћењем Флекбок-а. Флекбок је нови модул у ЦСС3. Она нуди једноставнији метод за усклађивање садржаја. За центрирање садржаја вертикално у флек бок, једноставно додајте алигн-итемс: центар; и то је то.

Имајте на уму да Флекбок неки претраживачи подржавају само парцијалне функције Флекбок модула као што су Интернет Екплорер 10, Сафари, 6 и Цхроме 27 и ниже. Дакле, слично као и трик са ЦСС3 Трансформ, уверите се да ефекат лепо пада у овом претраживачу.