Zentroko irudiak, testua eta bloke-elementuak webguneak eraikitzen dituzunean
Webguneak nola eraikitzen ikasten ari bazara, masterra egin behar duzun trikimailu ohikoenetakoa da arakatzailearen leihoan elementuak nola antolatu. Honek orriaren irudia zentratzen du, edo tituluek bezala, diseinuaren zati gisa justifikatzeko zentroa izan liteke.
Irudien edo testu zentratuen begirada bisual hau betetzeko modu egokia edo baita zure webgunearen osoa Cascading Style Sheets (CSS) erabiliz . Zentroaren propietate gehienak CSSn 1.0 bertsioan egon dira eta CSS3 eta web arakatzaile modernoekin lan egiten dute.
Web diseinuaren alderdi askotan bezala, web orriko elementu nagusiak CSS erabiltzeko modu ugari daude. Ikus dezagun begirada bisual hori lortzeko CSS erabiltzeko era batzuk.
CSS erabiltzea Orokorra HTML elementuetarako zentro bihurtzeko
CSS-rekin zentratzea web diseinatzaileen aurrean erronka izan daiteke, estilo bisual hori betetzeko era asko daudeelako. Metodo barietateak garatzaile onak eta gozoak izan daitezkeen arren, teknika guztiek ez duten elementu guztietan lan egiten duten bitartean ezaguna denez, webgune berrien profesionalak izugarri zailak izango lirateke, metodo desberdinek metodo desberdinak erabiltzen dituztela jakin dezaten. Hobe da hurbilketa gutxi batzuk ulertzea. Erabili egiten dituzun heinean, zein modutan funtzionatzen duen jakingo duzu kasuetan.
Goi mailan, CSS erabil dezakezu:
- Zentroaren testua
- Bloke-maila elementu bat zentratu (zatiketa bat bezala)
- Zentro bat irudi bat
- Zirkulazio bertikal bat bloke bat edo irudi bat
Duela asko (asko) urte, web diseinatzaileek
Zentramentuen testua CSSrekin
Web orri batean zentratzeko modurik errazena testu da. Bakarrik estiloko estilo bakarra dago hau egiteko: lerrokatu testua. Hartu beheko CSS estiloa, adibidez:
p.center {text-align: center; }
CSS lerro honekin, erdiko klasearekin idatzitako paragrafo bakoitza horizontalki zatituko da elementu nagusiaren barruan. Adibidez, paragrafo zatiketa baten barruan egon bazen, zatiketa horren seme bat zena izanik, horizontalki zentratuko litzateke
Hemen HTML dokumentuan aplikatutako klase honen adibide bat da:
Testu hau zentratua dago.
Testua lerrokatzeko propietatearekin testua zentratzen denean, gogoratu hori edukiko duen elementu horren barruan zentratuko da eta ez da nahitaez orri osoaren barruan zentratuko. Gogoan izan, halaber, testu zentruaren justifikazioa edukia bloke handietarako irakur daitekeen zaila dela, beraz, estilo hau neurri txikiagoan erabili. Berrikusketek eta testu-bloke txikiek, esate baterako, artikulu baten edo beste eduki batzuen testuliburua bezalakoak, erraz irakurtzen eta finak dira zentratuta, baina testu-bloke handiagoak, artikulu osoak bezala, kontsumitzeko erronkak izango lirateke edukia guztiz zentratuta badago justifikatuta. Gogoratu, irakurgarritasuna beti da gakoa web testuaren inguruan!
Edukiaren bloke zentralak CSSrekin
Blokeoak zehaztutako zabalera dute eta bloke-maila elementu gisa ezartzen diren edozein elementu dira. Askotan, bloke hauek HTML
div.center {
marjina: 0 auto;
zabalera: 80;
}
Marjinaren propietatearen CSS atal honek goiko eta beheko marjinak 0 balioko luke, ezker eta eskuineko "auto" erabiliko lukeen bitartean. Hau funtsean eskuragarri dagoen edozein tokitatik hartzen du eta leihatilako leihoaren bi aldeen artean berdin banatzen da, orrialdean elementua modu eraginkorrean kokatuz.
Hemen HTMLn aplikatzen da:
baina haren testua lerrokatuta geratzen da.
Zure blokea zehaztutako zabalera duen bitartean, osagaiaren barruan kokatuko da. Blokean jasotako testua ez da haren barruan zentratuko, baina left-justified egingo da. Hori dela eta, testua ezkerretan justifikatuta dago lehenetsitako web arakatzaileetan. Testua zentratua izan nahi baduzu, metodo honekin batera idatzitako testua lerrokatzeko erabili ahal izango zenuke zatiketa zentralizatzeko.
Zentramentuen irudiak CSSrekin
Nabigatzaile gehienek paragrafoari begira dagoen testua lerrokatzeko propietate bera erabiliz zentratutako irudiak bistaratuko diren bitartean, ez da ideia ona W3C-k gomendatzen ez duen teknika hori baieztatzea. Gomendagarria ez denez, nabigatzaileen etorkizuneko bertsioek metodo hau baztertzeko aukera izan dezakete beti.
Irudi baten erdian lerrokatzeko testua erabiltzea beharrean, esplizituki esango diozu arakatzaileak irudia bloke-maila den. Horrela, beste bloke bat bezala jarri dezakezu. Hemen gertatzen den CSS hau da:
img.center {
erakutsi: blokea;
marjina-ezkerra: auto;
marjina-eskuinera: auto;
}
Eta hona hemen zentratu nahi dugun irudirako HTMLa:
Era berean, objektuak objektuak zentratu ditzakezu CSS bidez (ikus behean), baina hurbilketa hau EZ da gomendagarria, estilo bisualak zure HTML markatzean gehitzen baititu. Gogoratu, estilo eta egitura bereiztu nahi ditugu, beraz, CSS estekak zure HTML kodea gehitzen zaizkio bereizketarekin eta, hortaz, saihestu behar da beti.
Centering Elements Vertically with CSS
Zentramentu objektuak bertikalean beti izan dira web diseinuan erronkak, baina CSS Flexible Box Layout modulua askatzea CSS3-an, gaur egun modu bat egiteko.
Lerro bertikalak lerrokatze horizontalean bezala funtzionatzen du batez ere. CSS propietatea bertikalki lerrokatzen da erdiko balioa erabiliz.
.vcenter {
bertikalki lerrokatzea: erdikoa;
}
Ikuspegi honetarako arazoa da arakatzaile guztiek ez dutela CSS FlexBox onartzen, are gehiago CSS diseinuaren metodo berriarekin datozenak! Izan ere, gaur egun nabigatzaile modernoak gaur egun CSS estilo hau onartzen dute. Horrek esan nahi du zure Flexbox-ekin kezkak bakarrik askoz nabigatzaile bertsio zaharragoa dela.
Nabigatzaile zaharragoekin arazoak badituzu, W3C-k gomendatzen dizu testua bertikalki edukiontzi batean metodo hau erabiliz:
- Jarri elementuak elementu bat barruan zentratu, hala nola, div bat.
- Ezarri gutxieneko altuera edukiontzian.
- Declare que contiene elementos como una tabla de celdas.
- Ezarri lerro bertikala "erdiraino".
Adibidez, hemen CSS da:
.vcenter {
min-height: 12em;
bistaratu: table-cell;
bertikalki lerrokatzea: erdikoa;
}
Hemen HTMLa da:
Testu hau kutxa bertikalki zentratzen da.
Internet Explorerren bertsio bertikalak eta bertsio zaharrak
Internet Explorer (IE) behartzeko modu batzuk daude eta, ondoren, baldintzazko iruzkinak erabiltzen dituzte IE estiloak bakarrik ikusten dituztela, baina pixka bat zehatzak eta itsusiak dira. Berri onak Microsoft-en IEren bertsio zaharragoak onartzen dituen azken erabakia berreskuratzea da. Arakatzaile ez onargarriak laster irten behar dira, web diseinatzaileek CSS FlexBox bezalako diseinu ikuspegi modernoak erabil ditzaten, CSS formatu guztia erabiliko duena, ez centering, web diseinatzaile guztientzat errazagoa.