Čo treba vedieť
- Na vycentrovanie textu použite nasledujúci kód („[/]“ označuje zalomenie riadku): .center {[/] text-align: center; [/] }.
- Vycentrovať bloky obsahu s nasledujúcim kódom („[/]“ označuje zalomenie riadku): .center {[/] okraj: auto; [/] šírka: 80em; [/] }.
- Vycentrovanie obrázka („[/]“ označuje zalomenie riadku): img.center {[/] display: block; [/] okraj zľava: auto; [/] okraj vpravo: auto; [/] }.
CSS je najlepší spôsob, ako vycentrovať prvky, ale môže to byť výzva pre začínajúcich webdizajnérov, pretože existuje toľko spôsobov, ako to dosiahnuť. Tento článok vysvetľuje, ako používať CSS na vycentrovanie textu, blokov textu a obrázkov.
Centrovanie textu pomocou CSS
Na vycentrovanie textu na stránke potrebujete poznať iba jednu vlastnosť štýlu:
.center {
zarovnanie textu: na stred;
}
S týmto riadkom CSS bude každý odsek napísaný s triedou .center vycentrovaný vodorovne vo vnútri svojho nadradeného prvku. Napríklad odsek vo vnútri oddielu (potomok tohto oddielu) by bol vycentrovaný vodorovne vo vnútri.
Tu je príklad tejto triedy použitý v dokumente HTML:
Tento text je zarovnaný na stred.
Pri centrovaní textu pomocou vlastnosti text-align nezabudnite, že bude centrovaný v rámci prvku, ktorý obsahuje, a nemusí byť nevyhnutne centrovaný v rámci celej stránky.
Pri texte webových stránok je vždy kľúčová čitateľnosť. Veľký bloky textu zarovnaného na stred môže byť ťažké čítať, preto tento štýl používajte s mierou. Nadpisy a malé bloky textu, napríklad text ukážky článku, sú zvyčajne ľahko čitateľné, ak sú umiestnené na stred; väčšie bloky textu, napríklad celý článok, by však boli náročné na konzumáciu, ak by boli úplne zarovnané na stred.
Centrovanie blokov obsahu pomocou CSS
Bloky obsahu sa vytvárajú pomocou kódu HTML.
.center {
okraj: auto;
šírka: 80em;
}
Tento skratka CSS pre vlastnosť margin by nastavila horný a dolný okraj na hodnotu 0, zatiaľ čo ľavá a pravá strana by používali „auto“. Toto v podstate zaberá každý dostupný priestor a rovnomerne ho rozdeľuje medzi dve strany výrezu, čím efektívne centruje prvok na strana.
Tu sa uplatňuje v HTML:
Celý tento blok je vycentrovaný,ale text v ňom je zarovnaný doľava.
Pokiaľ má váš blok definovanú šírku, vycentruje sa sám vnútri obsahujúceho prvku. Text obsiahnutý v tomto bloku nebude v ňom centrovaný, ale bude zarovnaný doľava. Je to tak preto, lebo vo webových prehľadávačoch je text ako predvolený zarovnaný doľava. Ak chcete, aby bol text tiež vycentrovaný, môžete na vycentrovanie rozdelenia použiť vlastnosť zarovnania textu, ktorú ste uviedli skôr v spojení s touto metódou.
Centrovanie obrázkov pomocou CSS
Aj keď väčšina prehliadačov bude zobrazovať obrázky vycentrované pomocou rovnakej vlastnosti zarovnania textu, W3C to neodporúča. Preto vždy existuje šanca, že sa budúce verzie prehliadačov môžu túto metódu ignorovať.
Namiesto použitia zarovnania textu na vycentrovanie obrázka by ste mali prehliadaču výslovne povedať, že obrázok je prvkom na úrovni bloku. Týmto spôsobom ho môžete vycentrovať tak, ako by to bol akýkoľvek iný blok. Toto umožňuje CSS:
img.center {
displej: blok;
okraj vľavo: auto;
pravý okraj: auto;
}
A tu je kód HTML pre obrázok, ktorý sa má vycentrovať:
Objekty môžete tiež centrovať pomocou vloženého CSS (pozri nižšie), ale tento prístup sa neodporúča, pretože pridáva do vašich značiek HTML vizuálne štýly. Pamätajte, že štýl a štruktúra by mali byť samostatné; pridanie štýlov CSS do HTML toto rozdelenie prelomí, a preto by ste sa mu mali vyhnúť, kedykoľvek je to možné.
Centrovanie prvkov vertikálne pomocou CSS
Centrovanie objektov vo zvislom smere bolo vždy pri webdizajne náročné, ale vydanie Modul flexibilného rozloženia CSS v CSS3 poskytuje spôsob, ako to urobiť.
Vertikálne zarovnanie funguje podobne ako horizontálne zarovnanie uvedené vyššie. Vlastnosť CSS je zarovnaná na výšku, napríklad takto:
.vcenter {
vertical-align: stred;
}
Všetky moderné prehliadače podporujú tento štýl CSS. Ak máte problémy so staršími prehľadávačmi, W3C odporúča, aby ste text vycentrovali vertikálne v kontajneri. Urobíte to tak, že umiestnite prvky do obsahujúceho prvku, napríklad a div, a nastavte na ňom minimálnu výšku. Deklarujte obsahujúci prvok ako bunku tabuľky a nastavte zvislé zarovnanie na stred.
Napríklad tu je CSS:
.vcenter {
min-výška: 12em;
displej: bunka tabuľky;
vertical-align: stred;
}
A tu je HTML:
Tento text je v poli zvislo na stred.
Nepoužívajte prvok HTML na vycentrovanie obrázkov a textu; bola zastaraná a moderné webové prehľadávače ju už nepodporujú. Toto je z veľkej časti odpoveď na jasné oddelenie štruktúry a štýlu HTML5: HTML vytvára štruktúru a CSS diktuje štýl. Pretože centrovanie je vizuálna charakteristika prvku (ako vyzerá, a nie ako je), tento štýl sa zaobchádza s CSS, nie s HTML. Namiesto toho používajte CSS, aby sa vaše stránky zobrazovali správne a zodpovedali moderným štandardom.
Vertikálne centrovanie a staršie verzie prehľadávača Internet Explorer
Môžete prinútiť program Internet Explorer (IE), aby vycentroval a potom použil podmienené komentáre, takže štýly uvidí iba IE, ale sú trochu podrobné a neatraktívne. Rozhodnutie spoločnosti Microsoft z roku 2015 zrušiť podporu pre staršie verzie IE, ale nebude to mať problém, pretože prehliadač IE prestane byť používaný.