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