Miðju myndir, texta og blokkir þættir við að byggja upp vefsíður
Ef þú ert að læra hvernig á að byggja upp vefsíður , þá er ein af algengustu bragðarefur sem þú þarft að læra að læra hvernig á að miðla hlutum í vafranum. Þetta gæti þýtt að miða mynd á síðunni, eða það gæti verið miðstöð-réttlætanlegt texta eins og fyrirsagnir sem hluti af hönnuninni.
Rétta leiðin til að ná þessu sjónarhorni miðju mynda eða texta eða jafnvel alla vefsíðuna þína er með því að nota Cascading Style Sheets (CSS) . Flestir eiginleikar miðstöðvarinnar hafa verið í CSS síðan útgáfu 1.0 og þau vinna vel með CSS3 og nútíma vefur flettitæki .
Eins og margir þættir vefhönnunar eru margar leiðir til að nota CSS til miðpunktar á vefsíðu. Við skulum skoða nokkrar mismunandi leiðir til að nota CSS til að ná þessu sjónarhorni.
Yfirlit yfir notkun CSS á miðpunktar í HTML
Miðað við CSS getur verið áskorun fyrir upphaf vefhönnuða vegna þess að það eru svo margar mismunandi leiðir til að ná þessum sjónrænum stíl. Þó að fjölbreyttar aðferðir geta verið góðar eða skemmtilegar vefhönnuðir sem vita að ekki eru allir aðferðir sem virka á hvert frumefni, þetta getur verið hræðilegt krefjandi fyrir nýliða vefþjófa þar sem fjölbreyttar aðferðir þýðir að þeir þurfa að vita hvenær á að nota hvaða nálgun. Það besta sem þarf að gera er að öðlast skilning á nokkrum aðferðum. Eins og þú byrjar að nota þá munt þú læra hvaða aðferð virkar best í hvaða tilvikum.
Á háu stigi geturðu notað CSS til að:
- Miðtexti
- Miðjaðu blokkastig þáttur (eins og deild)
- Center mynd
- Miðjaðu lóðrétt eða mynd með lóðrétta miðli
Fyrir mörg (mörg) ár síðan, gætu vefhönnuðir notað
Miðun texta með CSS
Auðveldasti hluturinn til að miða á vefsíðu er texti. Það er aðeins einn stíll eign sem þú þarft að vita til að gera þetta: text-align. Taktu CSS stíl hér að neðan, til dæmis:
p.center {text-align: center; }
Með þessum lína af CSS, hvert málsgrein sem skrifuð er með miðjaflokknum yrði miðlægt lárétt innan foreldrahlutans. Til dæmis, ef málsgreinin var innan deildar, sem þýðir að það væri barn þess deildar, væri það miðstætt lárétt innan
Hér er dæmi um þennan flokk sem er notuð í HTML skjalinu:
Þessi texti er miðuð.
Þegar miðað er á texta með textajöfnuðu eigninni skaltu muna að það muni vera miðju innan innihaldsefnis þess og ekki endilega miðuð innan heildarsíðunnar sjálfs. Mundu líka að miðstöð-réttlætanlegur textinn getur verið erfitt að lesa fyrir stórar blokkir af efni, svo notaðu þennan stíl sparlega. Fyrirsagnir og smærri textabrot, eins og textaefni fyrir greinar eða annað efni, eru oft auðvelt að lesa og fínn þegar þau eru miðuð, en stærri textabrot, eins og heildartexta sjálft, myndi vera krefjandi að neyta ef innihaldið var að fullu miðstöð réttlætanlegt. Mundu að læsileiki er alltaf lykill þegar kemur að veftexti!
Centrifuges of content with CSS
Blokkir eru nokkrir þættir á síðunni þinni sem hafa skilgreindan breidd og eru settar upp sem blokkarþáttur. Oftast eru þessar blokkir búnar til með því að nota HTML
div.center {
framlegð: 0 sjálfvirkt;
breidd: 80em;
}
Þessi CSS-skýringarmynd fyrir framgangseiginleikann myndi setja efstu og neðsta mörkin að gildi 0, en vinstri og hægri myndu nota "sjálfvirkt". Þetta tekur í raun allt pláss sem er tiltækt og skiptir það jafnt á milli hliðanna á sjónarhólfsglugganum, með því að miðlæga frumefni á síðunni.
Hér er það notað í HTML:
en textinn inni í henni er vinstri taktur.
Svo lengi sem blokkin þín hefur skilgreindan breidd mun það miðja sig inni í innihaldsefninu. Texti sem er að finna í því húsnæði verður ekki miðað innan þess, en verður að vera réttlætanlegt. Þetta er vegna þess að textinn er vinstri-réttlætanlegur í sjálfgefna í vafra. Ef þú vilt líka að textinn miði, þá gætir þú notað textastilla eignina sem við náðum áður í tengslum við þessa aðferð til að miðla deildinni.
Miðja myndir með CSS
Þó að flestir vöfrum muni sýna myndir með miðju með sömu textajöfnuðum eignum sem við skoðum nú þegar fyrir málsgreinina, þá er ekki góð hugmynd að treysta á þá tækni sem ekki er mælt með af W3C . Þar sem ekki er mælt með því, þá er alltaf möguleiki á að framtíðarútgáfur af vöfrum gætu valið að hunsa þessa aðferð.
Í stað þess að nota texta-takt til að miðja mynd, ættir þú að segja skýrt frá vafranum að myndin sé blokkar stigi þáttur. Þannig getur þú sent það eins og þú myndir hverja aðra blokk. Hér er CSS til að gera þetta gerst:
img.center {
sýna: blokk;
framlegð-vinstri: sjálfvirk;
framlegð-hægri: sjálfvirkt;
}
Og hér er HTML sem fyrir myndina sem við viljum vera með miðju:
Þú getur einnig sent hlutum með CSS-línu (sjá hér að neðan), en þessi aðferð er ekki mælt með því að hún bætir sjónrænum stílum við HTML-merkið þitt. Mundu að við viljum aðgreina stíl og uppbyggingu, svo að bæta CSS stílum við HTML kóða með brot sem aðskilnaður og því ætti að forðast það þegar hægt er.
Centering Elements lóðrétt með CSS
Miðstöð mótmæla lóðrétt hefur alltaf verið krefjandi í vefhönnun, en með losun CSS Flexible Box Layout Module í CSS3 er nú leið til að gera það.
Lóðrétt jafnvægi virkar á sama hátt og lárétt röðun sem er að ofan. CSS eignin er lóðrétt með miðgildi.
.vcenter {
lóðrétt-takt: miðja;
}
Ókosturinn við þessa aðferð er að ekki eru allir vöggur sem styðja CSS FlexBox, þótt fleiri og fleiri séu að komast í þessa nýja CSS skipulag aðferð! Í raun styðja nútíma vafrar nú í dag þessa CSS stíl. Þetta þýðir að aðeins áhyggjur þínar með Flexbox væri miklu eldri vafraútgáfa.
Ef þú hefur vandamál með eldri vafra mælir W3C að þú miðjir texta lóðrétt í ílát með eftirfarandi aðferð:
- Settu þætti sem miða að innan innihaldsefnis, svo sem div.
- Stilltu lágmarkshæð á innihaldsefninu.
- Lýsið því að innihalda frumefni sem borðfrumu.
- Stilltu lóðrétta röðun í "miðju".
Til dæmis, hér er CSS:
.vcenter {
lágmarkshæð: 12em;
sýna: borð-klefi;
lóðrétt-takt: miðja;
}
Og hér er HTML:
Þessi texti er lóðrétt miðuð í reitinn.
Lóðrétt miðstöð og eldri útgáfur af Internet Explorer
Það eru nokkrar leiðir til að þvinga Internet Explorer (IE) að miða og nota síðan skilyrt athugasemdir þannig að aðeins IE sér stílin, en þau eru svolítið orðlaus og ljót. Góðu fréttirnar eru þær að með nýlegri ákvörðun Microsoft um að sleppa stuðningi við eldri útgáfur af IE þá ætti að vera að þeir sem eru óstuðningsaðilar verði fljótlega að koma á fót og auðvelda vefhönnuðum að nota nútíma útfærsluaðferðir eins og CSS FlexBox sem gerir alla CSS skipulag, ekki bara að miða, auðveldara fyrir alla vefhönnuðir.