Mit kell tudni
- A szöveg középre állításához használja a következő kódot ("[/]" egy sortörést jelöl): .center [[/] text-align: center; [/] }.
- A tartalom középső blokkjai a következő kóddal ("[/]" sortörést jelöl): .center {[/] margó: automatikus; [/] szélesség: 80em; [/] }.
- Kép középre állítása ("[/]" vonaltörést jelöl): img.center {[/] display: blokk; [/] bal szél: automatikus; [/] margin-right: auto; [/] }.
A CSS a legjobb módszer az elemek központosítására, de kihívást jelenthet a kezdő webtervezők számára, mert nagyon sokféle módon lehet megvalósítani. Ez a cikk elmagyarázza, hogyan lehet CSS-t használni a szöveg, a szövegblokkok és a képek központosításához.
Szöveg központosítása CSS-sel
Csak egy stílus tulajdonságot kell ismernie az oldal szövegének központosításához:
.center {
text-align: center;
}
Ezzel a CSS-sorral minden .center osztállyal írt bekezdés vízszintesen középre kerül a szülőelem belsejében. Például egy szakaszon belüli bekezdés (ennek a részlegnek a gyermeke) vízszintesen középre kerülne a.
Íme egy példa erre az osztályra, amelyet a HTML dokumentumban alkalmaztunk:
Ez a szöveg középre kerül.
Amikor a szöveget a text-align tulajdonsággal központosítja, ne feledje, hogy az a benne lévő elemen belül középre kerül, és nem feltétlenül magában a teljes oldalon.
Az olvashatóság mindig kulcsfontosságú a weboldal szövege szempontjából. Nagy középre igazított szöveg blokkjai nehezen olvasható, ezért használja ezt a stílust takarékosan. A címsorokat és a kis szövegtömböket, például a cikk előzetes szövegét, középpontban általában könnyű elolvasni; ugyanakkor a nagyobb szövegtömbök, például egy teljes cikk, kihívást jelentene a fogyasztásukra, ha teljesen középre igazolják.
A tartalomtömbök központosítása CSS-sel
A tartalomtömbök a HTML használatával jönnek létre.
.center {
margó: auto;
szélesség: 80em;
}
A margó tulajdonságának ez a CSS-rövidítése a felső és az alsó margót 0 értékre állítja, míg a bal és a jobb az "auto" -t használja. Ez lényegében lefoglal minden rendelkezésre álló helyet, és egyenletesen elosztja a nézetablak két oldala között, az elemet hatékonyan központosítva az oldal.
Itt alkalmazzák a HTML-ben:
Ez az egész blokk középre áll,de a benne lévő szöveg igazítva van balra.
Mindaddig, amíg a blokkja meghatározott szélességű, addig a középpontba helyezi a benne lévő elemet. Az ebben a blokkban található szöveg nem a központban lesz, hanem balra igazított. Ez azért van, mert a szöveg balra igazított, mint alapértelmezett a böngészőkben. Ha a szöveget is központosítani szeretné, használhatja a korábban lefedett text-align tulajdonságot ezzel a módszerrel együtt a felosztás központosításához.
Képek központosítása CSS-sel
Bár a legtöbb böngésző ugyanazokat a szöveg-igazítási tulajdonságokat használva középre állítja a képeket, a W3C nem javasolja. Ezért mindig van esély arra, hogy a böngészők jövőbeli verziói mellőzzék ezt a módszert.
Ahelyett, hogy text-align-et használna a kép központosításához, kifejezetten meg kell mondania a böngészőnek, hogy a kép blokkszintű elem. Így központosíthatja, mint bármely más blokkot. Itt van a CSS ennek megvalósításához:
img.center {
kijelző: blokk;
bal margó: automatikus;
jobb-jobb: auto;
}
És itt van a kép középre állítandó HTML-je:
Az objektumokat központosított CSS-sel is központosíthatja (lásd alább), de ez a megközelítés nem ajánlott, mert vizuális stílusokat ad hozzá a HTML-jelöléshez. Ne feledje, hogy a stílusnak és a felépítésnek külön kell lennie; CSS-stílusok hozzáadása a HTML-hez megszakítja ezt a szétválasztást, és mint ilyen, lehetőség szerint kerülje azt.
Az elemek függőleges központosítása CSS-sel
Az objektumok függőleges központosítása mindig is nagy kihívást jelentett a webes tervezés során, de a CSS rugalmas dobozelrendezési modul a CSS3-ban lehetőséget nyújt arra.
A függőleges igazítás a fent leírt vízszintes igazításhoz hasonlóan működik. A CSS tulajdonság függőlegesen igazodik, így:
.vcenter {
függőleges-igazítás: közép;
}
Minden modern böngésző támogassa ezt a CSS stílust. Ha problémája van a régebbi böngészőkkel, a W3C azt javasolja, hogy a szöveget függőlegesen helyezze el a tárolóban. Ehhez helyezze az elemeket egy tartalmazó elem belsejébe, például a div, és állítson be egy minimális magasságot. Nyilvánítsa a tartalmazó elemet táblázat cellaként, és állítsa a függőleges igazítást "középre".
Például itt van a CSS:
.vcenter {
min-magasság: 12em;
display: tábla-cella;
függőleges-igazítás: közép;
}
És itt van a HTML:
Ez a szöveg függőlegesen középre kerül a mezőben.
Ne használja a HTML elemet képek és szöveg középre állításához; elavult, és a modern webböngészők már nem támogatják. Ez nagyrészt válasz arra, hogy a HTML5 egyértelműen elkülöníti a szerkezetet és a stílust: a HTML struktúrát hoz létre, a CSS pedig diktálja a stílust. Mivel a központosítás egy elem vizuális jellemzője (jobban néz ki, mint amilyen), ezt a stílust CSS-sel, nem pedig HTML-sel kezelik. Használjon helyette CSS-t, hogy az oldalai megfelelően jelenjenek meg és megfeleljenek a modern szabványoknak.
Függőleges központosítás és az Internet Explorer régebbi verziói
Kényszerítheti az Internet Explorer (IE) központosítását, majd feltételes megjegyzéseket használhat, hogy csak az IE lássa a stílusokat, de ezek kissé bőbeszédűek és vonzóak. A Microsoft 2015-ös döntése a támogatás megszüntetéséről az IE régebbi verzióiazonban ezt nem kérdéssé teszi, mivel az IE használatbavétele megszűnik.