Obrázky centra, text a prvky bloku pri vytváraní webových stránok
Ak sa naučíte stavať webové stránky , jeden z najčastejších trikov, ktoré budete musieť zvládnuť, je, ako centrovat položky v okne prehliadača. Môže to znamenať centrovanie obrázka na stránke, alebo by mohol byť stredový text, ako je titulok ako súčasť dizajnu.
Správny spôsob, ako dosiahnuť tento vizuálny vzhľad vycentrovaných obrázkov alebo textu alebo dokonca celej vašej webovej stránky, je pomocou kaskádových štýlov (CSS) . Väčšina vlastností pre centrovanie je v CSS už od verzie 1.0 a funguje skvele s CSS3 a modernými webovými prehliadačmi .
Podobne ako veľa aspektov dizajnu webových stránok existuje viacero spôsobov, ako používať CSS na centrum elementov na webovej stránke. Poďme sa pozrieť na niekoľko rôznych spôsobov, ako použiť CSS na dosiahnutie tohto vizuálneho vzhľadu.
Prehľad použitia CSS na centrum elementov v HTML
Centrovanie pomocou CSS môže byť výzvou pre začínajúcich web dizajnérov, pretože existuje toľko rôznych spôsobov, ako dosiahnuť tento jeden vizuálny štýl. Zatiaľ čo rôzne metódy môžu byť pekné alebo ostré vývojári webu, ktorí vedia, že nie všetky techniky pracujú na každom prvku, môže to byť strašne náročné pre novších webových profesionálov, pretože široká škála metód znamená, že potrebujú vedieť, kedy použiť ktorý prístup. Najlepšia vec, ktorú musíte urobiť, je pochopiť niekoľko prístupov. Keď ich začnete používať, zistíte, ktorá metóda najlepšie funguje.
Na vysokej úrovni môžete použiť CSS na:
- Stredový text
- Vycentrovať prvok na úrovni bloku (ako rozdelenie)
- Centrovanie obrázka
- Zvisle vycentrovať blok alebo obrázok
Pred mnohými (mnohými) rokmi by web dizajnéri mohli používať prvok
Centrum textu s CSS
Najjednoduchšia vec, ktorá sa má centrovať na webovej stránke, je text. Existuje iba jedna vlastnosť štýlu, ktorú potrebujete vedieť: text-align. Vezmite si štýl CSS nižšie, napríklad:
p.center {text-align: center; }
S touto líniou CSS by bol každý odsek napísaný so stredovou triedou vystredený vo svojom nadradenom prvku horizontálne. Napríklad, ak bol odsek vnútri divízie, čo znamená, že to bolo dieťa tejto divízie, bolo by to umiestnené horizontálne v rámci
Tu je príklad tejto triedy aplikovanej v dokumente HTML:
Tento text je vycentrovaný.
Pri centrovaní textu s vlastnosťou textu align, nezabudnite, že bude centrovaný v rámci jeho elementu, ktorý nie je nevyhnutne centrovaný na celú stránku samotnú. Pamätajte tiež, že v prípade veľkých blokov obsahu môže byť ťažko čitateľný text so stredovým rozlíšením, preto používajte tento štýl šetrne. Nadpisy a malé bloky textu, ako text ukážky pre článok alebo iný obsah, sú často ľahko čitateľné a jemné, keď sú sústredené, ale väčšie bloky textu, ako celý článok samotný, by boli náročné konzumovať, ak by bol obsah úplne centrom odôvodnený. Pamätajte, čitateľnosť je vždy kľúčová, pokiaľ ide o text webovej stránky!
Centrovacie bloky obsahu s CSS
Bloky sú ľubovoľné prvky na vašej stránke, ktoré majú definovanú šírku a sú vytvorené ako prvok na úrovni bloku. Často sa tieto bloky vytvárajú pomocou elementu
div.center {
marža: 0 auto;
šírka: 80mm;
}
Táto skratka CSS pre vlastnosť okrajov by nastavila horné a dolné okraje na hodnotu 0, zatiaľ čo ľavý a pravý by používal "auto". Toto v podstate trvá akýkoľvek priestor, ktorý je k dispozícii, a rovnomerne ho rozdelí medzi obidve strany okien okna a efektívne centrovanie prvku na stránke.
Tu sa používa v jazyku HTML:
ale text vo vnútri je zarovnaný vľavo.
Pokiaľ váš blok má definovanú šírku, bude sa v strede samotného vnútri obsahujúceho elementu. Text obsiahnutý v tomto bloku nebude v ňom sústredený, ale bude odôvodnený vľavo. Je to preto, lebo text je ľavotočivý v predvolenom nastavení vo webových prehliadačoch. Ak ste chceli, aby text bol tiež centrovaný, použite vlastnosť text-align, ktorú sme predtým pokryli v spojení s touto metódou, aby ste centrum rozdelili.
Centrovanie obrázkov pomocou služby CSS
Zatiaľ čo väčšina prehliadačov bude zobrazovať obrázky vycentrované pomocou tej istej textovej zarovnanej vlastnosti, ktorú sme už pozrel na odsek, nie je dobré sa spoliehať na túto techniku, pretože W3C ju neodporúča. Keďže sa neodporúča, je vždy pravdepodobné, že budúce verzie prehliadačov sa môžu rozhodnúť ignorovať túto metódu.
Namiesto použitia textového zarovnávania na centrovanie obrázka by ste mali explicitne povedať prehliadaču, že obrázok je prvok na úrovni bloku. Týmto spôsobom ju môžete vycentrovať, aký by bol iný blok. Tu je CSS, aby sa to stalo:
img.center {
zobrazenie: blok;
margin-left: auto;
margin-right: auto;
}
A tu je HTML, ktorý pre obrázok, ktorý by sme chceli sústrediť:
Môžete tiež centrovanie objektov pomocou in-line CSS (pozri nižšie), ale tento prístup sa NEDÁNE odporúča, pretože pridáva vizuálne štýly do vašej HTML značky. Pamätajte si, že chceme oddeliť štýl a štruktúru, takže pri pridávaní štýlov CSS do vášho kódu HTML rozdelíte túto separáciu a ako taký by ste sa mali vyhnúť vždy, keď je to možné.
Strediace prvky vertikálne pomocou CSS
Centrovacie objekty vertikálne boli vždy náročné pri návrhu webových stránok, ale s vydaním CSS Flexible Box Layout Module v CSS3 je teraz spôsob, ako to urobiť.
Vertikálne nastavenie funguje podobne ako vyššie uvedené horizontálne zarovnanie. Vlastnosť CSS je vertikálne zosúladená so strednou hodnotou.
.vcenter {
vertikálne zarovnanie: stredné;
}
Nevýhodou tohto prístupu je to, že nie všetky prehliadače podporujú CSS FlexBox, aj keď stále viac a viac sa blíži k tejto novej metóde rozloženia CSS! V súčasnosti všetky moderné prehliadače teraz podporujú tento štýl CSS. Znamená to, že vaša jediná obava s Flexboxom by bola oveľa staršia verzia prehliadača.
Ak máte problémy so staršími prehliadačmi, W3C odporúča, aby ste stred textu vertikálne v kontajneri pomocou nasledujúcej metódy:
- Položte elementy, ktoré majú byť vycentrované vnútri obsahujúceho prvku, ako napr. Div.
- Nastavte na prvok obsahujúci minimálnu výšku.
- Vyhlásiť, že obsahujú prvok ako bunka tabuľky.
- Nastavte zvislé zarovnanie na "stredné".
Napríklad tu je CSS:
.vcenter {
min-výška: 12m;
zobrazenie: tabuľka buniek;
vertikálne zarovnanie: stredné;
}
A tu je HTML:
Tento text je vertikálne vycentrovaný v poli.
Vertikálne centrovanie a staršie verzie programu Internet Explorer
Existujú niektoré spôsoby, ako vynútiť aplikáciu Internet Explorer (IE) a potom použiť podmienečné komentáre, takže IE vidí štýly, ale sú trochu verbózne a škaredé. Dobrou správou je, že vďaka nedávnemu rozhodnutiu spoločnosti Microsoft upustiť od podpory starších verzií IE by sa tieto nepodporujúce prehliadače mali čoskoro vyhnúť, čo by uľahčilo webovým dizajnérom používať moderné spôsoby rozloženia, ako je CSS FlexBox, ktoré budú robiť všetky rozloženie CSS, nielen centrovanie, jednoduchšie pre všetkých web dizajnérov.