Sentrum beelde, teks en blok elemente wanneer webtuistes gebou word
As jy leer hoe om webwerwe te bou , is een van die mees algemene truuks wat jy moet bemeester, hoe om items in die blaaier venster te sentreer. Dit kan beteken dat 'n prentjie op die bladsy gementreer word, of dit kan middel wees om teks soos hoofstukke te regverdig as deel van die ontwerp.
Die korrekte manier om hierdie visuele voorkoms van gesentreerde beelde of teks of selfs jou hele webblad te bereik, is deur gebruik te maak van Cascading Style Sheets (CSS) . Die meeste van die eienskappe vir sentrering is sedert C 1.0 in CSS, en hulle werk goed met CSS3 en moderne webblaaiers .
Soos baie aspekte van webontwerp, is daar verskeie maniere om CSS te gebruik om sentrumelemente in 'n webblad te gebruik. Kom ons kyk na 'n paar verskillende maniere om CSS te gebruik om hierdie visuele voorkoms te bereik.
Op Oorsig van die gebruik van CSS na sentrum elemente in HTML
Sentrum met CSS kan 'n uitdaging wees vir die begin van webontwerpers omdat daar soveel verskillende maniere is om hierdie een visuele styl te bereik. Alhoewel die verskeidenheid metodes dalk lekker of gesoute webontwikkelaars is wat weet dat nie alle tegnieke op elke element werk nie, kan dit vir nuwe webwerwe baie uitdagend wees, aangesien die wye verskeidenheid metodes beteken dat hulle moet weet wanneer om watter benadering te gebruik. Die beste ding om te doen is om begrip van 'n paar benaderings te kry. Soos jy begin om dit te gebruik, sal jy leer watter metode die beste werk in watter gevalle.
Op 'n hoë vlak kan jy CSS gebruik om:
- Sentrum teks
- Sentreer 'n blokvlak element (soos 'n afdeling)
- Sentreer 'n beeld
- Sentreer 'n blok of 'n beeld vertikaal
Baie (baie) jaar gelede kon webontwerpers die
Sentreer teks met CSS
Die maklikste ding om op 'n webblad te konsentreer, is teks. Daar is net een styl eiendom wat jy moet weet om dit te doen: teks-belyning. Neem die CSS-styl hieronder, byvoorbeeld:
p.center (text-align: center; }
Met hierdie lyn van CSS sal elke paragraaf wat met die middelklas geskryf is, horisontaal in sy ouerelement gesentreer word. Byvoorbeeld, as die paragraaf in 'n afdeling was, wat beteken dat dit 'n kind van daardie afdeling was, sou dit horisontaal binne die
Hier is 'n voorbeeld van hierdie klas wat in die HTML-dokument toegepas word:
Hierdie teks is gesentreer.
As jy teks met die teks-belyningseiendom sentreer, moet jy onthou dat dit gesentreer sal word binne die element wat dit bevat en nie noodwendig gesentreer word binne die volle bladsy self. Onthou ook dat die sentrum-geregverdigde teks moeilik kan wees om te lees vir groot blokke inhoud, dus gebruik hierdie styl spaarsaam. Opskrifte en klein blokkies teks, soos teaser-teks vir 'n artikel of ander inhoud, is dikwels maklik om te lees en fyn wanneer dit gesentreer word, maar groter blokke van teks, soos die volledige artikel self, sal uitdagend wees om te verteer as die inhoud heeltemal sentrum is. geregverdigde. Onthou, leesbaarheid is altyd sleutel wanneer dit by webtuiste-teks kom!
Sentrering van blokke van inhoud met CSS
Blokke is enige elemente op jou bladsy wat 'n gedefinieerde breedte het en as 'n blokvlak element gestig word. Dikwels word hierdie blokke geskep deur die HTML
div.center {
marge: 0 motor;
breedte: 80em;
}
Hierdie CSS-skorthand vir die eienskap van die kantlyn stel die boonste en onderste marges tot 'n waarde van 0, terwyl die linker en regs 'outomaties' sal gebruik. Dit neem in wese 'n beskikbare spasie en verdeel dit eweredig tussen die twee kante van die viewport-venster en plaas die element effektief op die bladsy.
Hier word dit in die HTML toegepas:
maar die teks daarin is links gebind.
Solank jou blok 'n gedefinieerde breedte het, sal dit homself binne die element bevat. Teks wat in die blokkie vervat is, sal nie daarin gesentreer word nie, maar sal regverdig word. Dit is becaus teks is links-geregverdig in die verstek in webblaaiers. As jy ook die teksgesentreerde wil hê, kan jy die teks-lyn-eiendom wat ons vroeër in kombinasie met hierdie metode gebruik het, gebruik om die afdeling te sentreer.
Sentreer prente met CSS
Terwyl die meeste blaaiers prente sal vertoon wat gesentreer word met dieselfde teks-lyn-eiendom, het ons alreeds na die paragraaf gekyk. Dit is nie 'n goeie idee om op die tegniek staat te maak nie, aangesien dit nie aanbeveel word deur die W3C nie . Aangesien dit nie aanbeveel word nie, is daar altyd 'n kans dat toekomstige weergawes van blaaiers kan kies om hierdie metode te ignoreer.
In plaas daarvan om teksbelyn te gebruik om 'n prent te sentreer, moet jy die leser eksplisiet vertel dat die prent 'n blokvlak element is. Op hierdie manier kan jy dit sentreer soos jy enige ander blok sou wou hê. Hier is die CSS om dit te laat gebeur:
img.center {
vertoon: blok;
marge-links: outomaties;
marge-regs: motor;
}
En hier is die HTML wat vir die beeld wat ons graag wil gesentreer word:
U kan ook voorwerpe gebruik met behulp van in-line CSS (sien hieronder), maar hierdie benadering word NIE aanbeveel nie aangesien dit visuele style by u HTML-opmaak voeg. Onthou, ons wil styl en struktuur skei, sodat CSS-style by u HTML-kode bygevoeg word, met die skeiding en as sodanig moet dit vermy word waar moontlik.
Sentrerende elemente vertikaal met CSS
Sentriese voorwerpe vertikaal is altyd 'n uitdaging in webontwerp, maar met die vrystelling van die CSS Flexible Box Layout Module in CSS3, is daar nou 'n manier om dit te doen.
Vertikale belyning werk soortgelyk aan horisontale belyning hierbo. Die CSS-eienskap is vertikaal in lyn met die middelwaarde.
. sentrum {
vertikale-belyning: middel;
}
Die nadeel van hierdie benadering is dat nie alle blaaiers CSS FlexBox ondersteun nie, alhoewel meer en meer na hierdie nuwe CSS-uitlegmetode kom! Trouens, al die moderne blaaiers ondersteun vandag hierdie CSS-styl. Dit beteken dat jou enigste besorgdheid met Flexbox baie ouer weergawe van die leser sou wees.
As u probleme met ouer blaaiers het, beveel die W3C aan dat u teks vertikaal in 'n houer gebruik deur die volgende metode te gebruik:
- Plaas die elemente in 'n bevattende element, soos 'n div.
- Stel 'n minimum hoogte op die bevattende element.
- Verklaar dat die element as 'n tafelsel bevat.
- Stel die vertikale belyning na "middel".
Byvoorbeeld, hier is die CSS:
. sentrum {
min-hoogte: 12em;
vertoon: tafelsel;
vertikale-belyning: middel;
}
En hier is die HTML:
Hierdie teks is vertikaal gesentreer in die blokkie.
Vertikale sentrering en ouer weergawes van Internet Explorer
Daar is 'n paar maniere om Internet Explorer (IE) te dwing om te sentreer en dan voorwaardelike opmerkings te gebruik sodat slegs IE die style sien, maar hulle is 'n bietjie verbasend en lelik. Die goeie nuus is dat met Microsoft se onlangse besluit om ondersteuning vir ouer weergawes van IE te laat val, moet sulke nie-ondersteunende blaaiers binnekort op pad wees. Dit maak dit makliker vir webontwerpers om moderne uitlegbenaderings soos CSS FlexBox te gebruik wat al die CSS-uitleg sal maak, nie net sentrering, makliker vir alle web ontwerpers.