Sintrumôfbyldings, tekst en blokje-eleminten as websiden bouwe
As jo learen meitsje hoe't jo websiden bouwe , is ien fan 'e meast foarkommende trucs dy't jo nedich ha meie is hoe't jo items fine yn it blêdfinster. Dit kin betsjutte dat in ôfbylding op 'e side sintraal is, of it soe sintraal meitsje kinne fan tekst as headlines as part fan it ûntwerp.
De goede manier om dizze fisuele útslach fan sintrale ôfbyldings of tekst of sels de hiele webside te meitsjen is troch Cascading Style Sheets (CSS) te brûken . De measte eigenskippen foar sintrum binne sûnt CSS3 ferzje 1.0 en wurkje se geweldich mei CSS3 en moderne webbrowsers .
Lykas in soad aspekten fan webûntwerp, binne der ferskate manieren om CSS te brûken foar sintraal eleminten yn in webside. Litte wy op ferskate wizen in sjogge om CSS te brûken om dizze fisuele soart te krijen.
Op Oersjoch Oersjoch fan CSS nei Centre Elements yn HTML
Sertifikaasje mei CSS kin in útdaging wêze foar begjin fan web-ûntwerpers om't der safolle ferskillende wizen binne om dizze ien optyske styl te meitsjen. Hoewol de ferskaat fan metoades wêze kinne fan noflike of seisde webûntwikkelders dy't witte dat net alle techniken op elk elemint wurkje, dit kin in protte fraachpetearje foar nije web professionals sa't de breed ferskaat fan metoaden betsjutte dat se witte moatte wannear't jo brûke wolle. De bêste saak te dwaan is om in begrip te krijen fan in pear oanpak. As jo se begjinne, sille jo leare hoe't de metoade it bêste wurket yn hokker eksimplaren.
Op hege nivo kinne jo CSS brûke:
- Sintrum tekst
- Sintrum in elemint fan elemint (lykas in divyzje)
- Sintrum in byld
- Fertikaal sintrum in blok of in byld
In soad (in soad) jierren lyn kinne web-ûntwerpen it elemint
Sertifikaten tekst mei CSS
It maklikste ding om te sintrum op in webside is tekst. Der is mar ien styl eigendom dy't jo witte moatte dat dit te dwaan: tekst-align. Nim it CSS-styl hjirûnder, bygelyks:
p.center {text-align: center; }
Mei dizze line fan CSS soe elke paragraaf skreaun wurde mei de sintraal klasse horizontaal yn syn parentele elemint. Bygelyks as de paragraaf binnen in divyzjesting wie, dat betsjutte dat it in bern fan dy divyzje wie, soe it horizontaal yn 'e
Hjir is in foarbyld fan dizze klasse dy't tapast wurdt yn it HTML dokumint:
Dizze tekst is sintraal.
As jo tekst ynrjochtsje mei de tekst-align-eigenskip, tink derom dat it sintraal binnen it elemint befettet en net needsaaklik sintraal binnen de folsleine side sels is. Tink derom dat it sintraal-ferienige tekst swier is om te lêzen foar grutte blokken fan ynhâld, dus dizze styl smaak brûke. Headlines en lytse blokjes fan tekst, lykas teaser-tekst foar in artikel of oare ynhâld, binne faak maklik om te lêzen en te finen as sintraal, mar gruttere blokken fan tekst, lykas it folsleine artikel sels, as útdaagjen wêze om te fergjen as de ynhâld folslein sintrum wie rjochtfeardich. Tink derom, lêsberens is altyd kaai as it giet om webside tekst!
Sesje Blokken fan Ynhâld mei CSS
Blokken binne eleminten op jo side dy't in definieare breedte hawwe en wurde as blokje-elemint fêstlein. Oftich binne dizze blokken makke troch it HTML
div.center {
marzje: 0 auto;
width: 80em;
}
Dizze CSS-skerm foar de marrige eigenskip soene de top- en bottommaren op in wearde fan 0 sette, wylst links en rjochts "auto" brûke. Dit makket essinsjeel elke romte dy't beskikber is en dielt itselde tusken de beide kanten fan it werjaan finster, effektyf sintrum it elemint op 'e side.
Hjir is it oanwêzich yn 'e HTML:
mar de tekst yn it ljocht is alignearre.
Lange jo blok in define breed hat, sil it himsels sintraal binnen it elemint befetsje. Tekst yn dizze blok sil net binnen it ynrjochte wurde, mar sil loftsjuster wurde. Dit is becaus tekst is oerlevere yn 'e standert yn web browsers. As jo de tekst ek soene winskje, kinne jo de tekst-alignige eigendom brûke, dy't wy eardere hawwe yn ferbân mei dizze metoade om de divyzje te santearjen.
Santearje fanôfbyldings mei CSS
Hoewol de measte browsers werjaan fan ôfbyldings dy't sintraal brûke, brûke itselde tekst-aligning eigendom, dy't wy al foar de paragraaf besocht hawwe, it is net in goeie idee om te fertsjinjen op dizze technyk as it net oanrikt wurdt troch de W3C . Om't it net oan te rieden is, is der altyd in kâns dat futuree ferzjes fan browsers keazen wiene om dizze metoade te missen.
Ynstee fan tekst te rjochtsjen om in ôfbylding te foarkommen, moatte jo de blêder eksplisyt sizze dat it byld in blokje-elemint is. Op dizze manier kinne jo it foarkar as jo in oare block hawwe. Hjir is it CSS om dit barre te meitsjen:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
En hjir is it HTML dat foar it byld dat wy graach sintraal wêze wolle:
Jo kinne ek saken oantsjutte mei ynsletten CSS (sjoch hjirûnder), mar dizze oanpassing is NOT oanrikkemandearre om't jo in byldkaartsjes yn jo HTML-markearring taheakje. Tink derom, wy wolle styl en struktuer ôfsûnderje, sadat CSS-stilen tafoegje oan jo HTML-koade mei brek dy ôfsûndering en as sadanich moat it foarkommen wurde as it mooglik is.
Santearjende eleminten Vertically mei CSS
Sertifisearjen fan objekten vertikaal hat altyd yndruk yn it web design, mar mei de frijlitting fan it CSS Flexible Box Layout Module yn CSS3 is der no in manier om it te dwaan.
Fertikaal ôfstimming wurket lykwols lykwols oan horizontale oandiel boppeferdield. De CSS-eigenskip is fertikaal mei de middelste wearde te rjochtsjen.
.vcenter {
vertical-align: midden;
}
De ûndergong nei dizze oanpak is dat net alle browsers stipe CSS FlexBox, hoewol mear en mear komme om dizze nije CSS-layout-metoade! Feitlik binne alle moderne browsers hjoed dizze CSS-styl te stypjen. Dit betsjut dat jo inkele problemen mei Flexbox in folle âldere browserferzje wêze.
As jo problemen mei âldere browsers hawwe, advisearret de W3C dat jo midden yn 'e tekst vertaallik sintraal brûke mei de folgjende metoade:
- Plak de eleminten dy't binnen it in elemint befetsje, lykas in div.
- Set in minimale hichte op it befette elemint.
- Ferklearje dat it elemint as tabelzellet.
- Set de fertikale ôfstimming oan "midden".
Bygelyks hjir is it CSS:
.vcenter {
min-hichte: 12em;
display: table-cell;
vertical-align: midden;
}
En hjir is it HTML:
Dizze tekst is vertaallik sintraal yn it fekje
Vertical Centering en âldere ferzjes fan Internet Explorer
Der binne inkele manieren om Internet Explorer (IE) te twingen om foarkar te brûken en dan gebrûk fan betingsten te kommentearjen sadat allinich de stilen sjoch, mar se binne in bytsje foarstel en ûnsjoch. It goede nijs is dat mei Microsoft's resinte beslút om stipe foar âldere ferzjes fan IE te fallen, dy net stipe browsers moatte op 'e wei komme, en makket it makliker foar web-ûntwerpers te brûken moderne layout-oanpassingen lykas CSS FlexBox, dy't alle CSS-ôfdielingen meitsje, Net allinich sintrum, makliker foar alle webûntwikkelders.