Obrázky centra, text a prvky bloku při vytváření webových stránek
Pokud se učíte stavět webové stránky , je jedním z nejobvyklejších triků, které budete potřebovat zvládnout, jak zaměřit položky v okně prohlížeče. To by mohlo znamenat, že na stránce bude vystředění obrazu, nebo by mohl být středový text jako titulky jako součást návrhu.
Správným způsobem, jak dosáhnout tohoto vizuálního vzhledu vycentrovaných obrázků nebo textu, nebo dokonce celé webové stránky, je pomocí kaskádových stylů (CSS) . Většina vlastností pro centrování je v CSS od verze 1.0 a fungují skvěle s CSS3 a moderními webovými prohlížeči .
Stejně jako mnoho aspektů návrhu webových stránek existuje několik způsobů, jak používat CSS k upřednostňování prvků na webové stránce. Podívejme se na několik různých způsobů, jak využít CSS k dosažení tohoto vizuálního vzhledu.
Přehled o používání prvků CSS ve středu ve formátu HTML
Centrování pomocí CSS může být výzvou pro začátečníky, protože existuje mnoho různých způsobů, jak tento vizuální styl dosáhnout. Zatímco různorodé metody mohou být pěkné nebo zkušení vývojáři webu, kteří vědí, že ne všechny techniky pracují na každém elementu, může to být strašně náročné pro novější webové profesionály, neboť široká škála metod znamená, že potřebují vědět, kdy použít jaký přístup. Nejlepší věcí, kterou je třeba udělat, je pochopit několik přístupů. Jakmile je začnete používat, zjistíte, která metoda funguje nejlépe, ve kterých případech.
Na vysoké úrovni můžete pomocí CSS:
- Text v centru
- Centrování prvku na úrovni bloku (jako dělení)
- Centrování obrazu
- Svisle vycentrovat blok nebo obrázek
Mnoho (před) lety, weboví návrháři mohli použít element
Centrování textu pomocí CSS
Nejjednodušší věc, která se na webové stránce soustředí, je text. Existuje pouze jedna vlastnost stylu, kterou potřebujete znát: text-align. Vezměte si níže uvedený styl CSS, například:
p.center {text-zarovnání: centrum; }}
Pomocí této řady CSS by každý odstavec napsaný ve středové třídě byl umístěn ve vodorovném směru uvnitř jeho nadřazeného prvku. Pokud by například byl odstavec uvnitř dělení, což znamená, že to bylo dítě tohoto rozdělení, bylo by to umístěno ve vodorovném směru uvnitř
Zde je příklad této třídy aplikované v dokumentu HTML:
Tento text je vycentrovaný.
Při centrování textu s vlastností text-align nezapomeňte, že bude centrován v rámci jeho prvku obsahujícího a nemusí být nutně centrován na celé stránce samotné. Také si pamatujte, že středně odůvodněný text může být obtížné číst pro velké bloky obsahu, proto používejte tento styl šetrně. Nadpisy a malé bloky textu, jako text ukázek pro článek nebo jiný obsah, jsou často snadno čitelné a jemné, když jsou soustředěny, avšak větší bloky textu, jako celý článek samotný, by byly náročné konzumovat, pokud obsah byl plně centrem oprávněné. Nezapomeňte, že čitelnost je vždy klíčová, pokud jde o text webové stránky!
Centrování bloků obsahu s CSS
Bloky jsou libovolné prvky na vaší stránce, které mají definovanou šířku a jsou vytvořeny jako element na úrovni bloku. Často jsou tyto bloky vytvářeny pomocí prvku HTML
div.center {
margin: 0 auto;
šířka: 80mm;
}}
Tato zkratka CSS pro vlastnost okrajů by nastavila horní a dolní okraje na hodnotu 0, zatímco levý a pravý by použil "auto". To v podstatě trvá jakýkoliv prostor, který je k dispozici, a rovnoměrně je rozdělí mezi obě strany okna okna a tím efektivně vystředí prvek na stránce.
Zde je použita v HTML:
ale text uvnitř je vlevo zarovnaný.
Dokud má váš blok definovanou šířku, bude se středem uvnitř prvku obsahujícího. Text obsažený v tomto bloku nebude v sobě centrován, ale bude opuštěn vlevo. To je proto, že text je opuštěn ve výchozím nastavení ve webových prohlížečích. Pokud byste také chtěli, aby byl text centrovaný, můžete použít funkci text-align vlastnost, kterou jsme předtím pokryli v souvislosti s touto metodou.
Centrování obrázků pomocí CSS
Zatímco většina prohlížečů bude zobrazovat obrázky vycentrované pomocí stejné vlastnosti text-align, na kterou jsme se již zabývali, není dobré se spoléhat na tuto techniku, protože W3C ji nedoporučuje. Vzhledem k tomu, že se nedoporučuje, je vždy pravděpodobné, že se budoucí verze prohlížečů rozhodnou ignorovat tuto metodu.
Namísto použití textového zarovnání pro vystředění obrázku byste měli explicitně informovat prohlížeč, že obraz je element na úrovni bloku. Tímto způsobem jej můžete vycentrovat stejně jako u jiných bloků. Zde je CSS, aby se to stalo:
img.center {
zobrazení: blok;
margin-left: auto;
margin-right: auto;
}}
A zde je HTML, který pro obrázek, který bychom chtěli být soustředěni:
Objekty lze také centrovat pomocí CSS in-line (viz níže), ale tento přístup se NENÍ doporučen, protože přidává vizuální styly do značky HTML. Nezapomeňte, že chceme oddělit styl a strukturu, a proto přidáváme styly CSS do vašeho kódu HTML tak, že oddělíte tuto separaci a jako takové byste se měli vyhnout, kdykoli je to možné.
Středící prvky vertikálně pomocí CSS
Centrování objektů bylo vertikálně vždy náročné při návrhu webových stránek, ale s uvolněním modulu CSS Flexible Box Layout v CSS3 je nyní způsob, jak to udělat.
Svislé zarovnání funguje podobně jako horizontální zarovnání uvedené výše. Vlastnost CSS je vertikálně zarovnána se střední hodnotou.
.vcenter {
vertikální zarovnání: střední;
}}
Nevýhodou tohoto přístupu je to, že ne všechny prohlížeče podporují CSS FlexBox, i když se stále více přiblíží této nové metodě rozvržení CSS! Ve skutečnosti dnes všechny moderní prohlížeče podporují tento styl CSS. To znamená, že vaše jediná starost o Flexbox by byla mnohem starší verze prohlížeče.
Máte-li problémy se staršími prohlížeči, W3C doporučuje, aby střed textu vertikálně v kontejneru pomocí následující metody:
- Umístěte prvky, které mají být vystředěny uvnitř prvku obsahujícího, např. Div.
- Nastavte minimální výšku na prvek, který obsahuje.
- Deklarovat, že obsahují prvek jako buňku tabulky.
- Nastavte vertikální zarovnání na "střední".
Například zde je CSS:
.vcenter {
min-výška: 12m;
zobrazení: tabulková buňka;
vertikální zarovnání: střední;
}}
A zde je HTML:
Tento text je vertikálně umístěn v poli.
Vertikální centrování a starší verze aplikace Internet Explorer
Existují některé způsoby, jak přinutit Internet Explorer (IE), aby se vycentroval a pak použil podmíněné komentáře, takže pouze IE vidí styly, ale jsou trochu verbózní a ošklivé. Dobrou zprávou je, že s nedávným rozhodnutím společnosti Microsoft upustit od podpory starších verzí IE by se tyto nepodporující prohlížeče brzy měly vymanit a usnadnit tak webovým návrhářům používat moderní rozvržení, jako je CSS FlexBox, které budou mít veškeré rozvržení CSS, nejen centrování, snadněji pro všechny webové designéry.