Шта знати
- За центрирање текста користите следећи код („[/]“ означава прелом линије): .центер {[/] поравнање текста: центер; [/] }.
- Средишњи блокови садржаја са следећим кодом („[/]“ означава прелом линије): .центер {[/] маргина: ауто; [/] ширина: 80ем; [/] }.
- Да бисте центрирали слику („[/]“ означава прелом линије): имг.центер {[/] приказ: блок; [/] маргин-лефт: ауто; [/] маргин-ригхт: ауто; [/] }.
ЦСС је најбољи начин за центрирање елемената, али то може бити изазов за почетнике веб дизајнера јер постоји толико много начина да се то постигне. Овај чланак објашњава како се ЦСС користи за центрирање текста, блокова текста и слика.
Центрирање текста помоћу ЦСС-а
Морате знати само једно својство стила да бисте центрирали текст на страници:
.центер {
поравнање текста: центар;
}
Са овом линијом ЦСС-а, сваки пасус написан са .центер класом биће центриран хоризонтално унутар свог надређеног елемента. На пример, пасус унутар одељења (дете тог одељења) био би центриран водоравно унутар.
Ево примера ове класе примењене у ХТМЛ документу:
Овај текст је центриран.
Када центрирате текст са својством поравнања текста, имајте на уму да ће он бити центриран унутар свог елемента који садржи, а не нужно у целој самој страници.
Читљивост је увек кључна када је реч о тексту веб странице. Велики блокови текста који је поравнан по средини може бити тешко прочитати, па штедите овај стил. Наслови и мали блокови текста, као што је најавни текст за чланак, обично се лако читају када се центрирају; међутим, веће блокове текста, попут целог чланка, било би изазовно конзумирати ако је у потпуности оправдано за центар.
Центрирање блокова садржаја помоћу ЦСС-а
Блокови садржаја креирају се помоћу ХТМЛ-а.
.центер {
маржа: ауто;
ширина: 80ем;
}
Овај ЦСС скраћеница за маргин својство би поставила горњу и доњу маргину на вредност 0, док би лева и десна користиле „ауто“. Ово у основи заузима било који доступан простор и равномерно га дели између две стране прозора оквира за приказ, ефективно центрирајући елемент на страница.
Овде се примењује у ХТМЛ-у:
Читав овај блок је центриран,али је текст у њему поравнат лево.
Све док ваш блок има дефинисану ширину, центрираће се унутар садржи елемента. Текст садржан у том блоку неће бити центриран унутар њега, већ ће бити поравнат с леве стране. То је зато што је текст поравнат са леве стране као подразумевани у веб прегледачима. Ако желите да и текст буде центриран, за центрирање поделе можете користити својство поравнања текста покривено раније у вези са овом методом.
Центрирање слика помоћу ЦСС-а
Иако ће већина прегледача приказати слике усредсређене користећи исто својство поравнања текста, В3Ц то не препоручује. Стога, увек постоји шанса да будуће верзије прегледача одлуче да игноришу овај метод.
Уместо да користите поравнање текста за центрирање слике, прегледачу бисте требали изричито рећи да је слика елемент на нивоу блока. На овај начин га можете центрирати као било који други блок. Ево ЦСС-а да се ово оствари:
имг.центер {
дисплеј блок;
маргин-лефт: ауто;
маргина-десно: ауто;
}
А ево и ХТМЛ-а за центрирање слике:
Такође можете центрирати објекте помоћу уграђеног ЦСС-а (погледајте доле), али овај приступ се не препоручује јер додаје визуелне стилове у ваше ХТМЛ ознаке. Запамтите, стил и структура треба да буду одвојени; додавање ЦСС стилова у ХТМЛ прекинуће то раздвајање и као такво треба да га избегавате кад год је то могуће.
Центрирање елемената вертикално помоћу ЦСС-а
Центрирање објеката вертикално увек је представљало изазов у веб дизајну, али издање ЦСС модул флексибилног распореда кутија у ЦСС3 пружа начин за то.
Вертикално поравнање функционише слично хоризонталном поравнању покривеном горе. Својство ЦСС је вертикално поравнато, отприлике овако:
.вцентер {
вертикално поравнање: средина;
}
Сви савремени прегледачи подржати овај ЦСС стил. Ако имате проблема са старијим прегледачима, В3Ц препоручује да текст вертикално центрирате у контејнер. Да бисте то урадили, поставите елементе унутар елемента који садржи, као што је див, и на њему подесите минималну висину. Прогласите елемент који садржи садржи ћелију табеле и поставите вертикално поравнање на "средина".
На пример, овде је ЦСС:
.вцентер {
мин-висина: 12ем;
приказ: табела-ћелија;
вертикално поравнање: средина;
}
И ево ХТМЛ-а:
Овај текст је вертикално центриран у пољу.
Не користите ХТМЛ елемент за центрирање слика и текста; застарео је, а модерни веб прегледачи га више не подржавају. Ово је великим делом одговор на јасно раздвајање структуре и стила у ХТМЛ5: ХТМЛ ствара структуру, а ЦСС диктира стил. Будући да је центрирање визуелна карактеристика елемента (како изгледа, а не какав је), тај стил се обрађује са ЦСС-ом, а не са ХТМЛ-ом. Уместо тога користите ЦСС како би се ваше странице правилно приказивале и усклађивале са савременим стандардима.
Вертикално центрирање и старије верзије Интернет Екплорера
Можете да приморате Интернет Екплорер (ИЕ) да центрира, а затим користите условне коментаре тако да само ИЕ види стилове, али они су помало опширни и незанимљиви. Одлука Мицрософта из 2015. да одустане од подршке за старије верзије ИЕмеђутим, ово ће бити не-питање како ИЕ излази из употребе.