Jak používat CSS k vycentrování obrázků a jiných HTML objektů

CSS je nejlepší způsob, jak vycentrovat prvky, ale může to být výzva pro začínající webové designéry, protože existuje mnoho způsobů, jak toho dosáhnout. Tento článek vysvětluje, jak pomocí CSS vycentrovat text, bloky textu a obrázky.

Centrování textu pomocí CSS

Chcete-li vycentrovat text na stránce, potřebujete znát pouze jednu vlastnost stylu:

.center {
zarovnání textu: na střed;
}

S tímto řádkem CSS bude každý odstavec napsaný třídou .center vycentrován vodorovně uvnitř jeho nadřazeného prvku. Například odstavec uvnitř divize (podřízený prvek této divize) by byl vycentrován vodorovně uvnitř.

Zde je příklad této třídy použitý v dokumentu HTML:

Tento text je vycentrován.

Při centrování textu pomocí vlastnosti zarovnání textu nezapomeňte, že bude vycentrován v rámci prvku, který obsahuje, a nemusí být nutně vycentrován v rámci celé stránky.

Centrování bloků obsahu pomocí CSS

Bloky obsahu jsou vytvářeny pomocí HTML.

.center {
okraj: auto;
šířka: 80em;
}

Tato zkratka CSS pro vlastnost margin by nastavila horní a dolní okraj na hodnotu 0, zatímco levá a pravá strana by používala „auto“. Tento v podstatě zabírá veškerý dostupný prostor a rovnoměrně jej rozděluje mezi dvě strany výřezu, čímž efektivně vycentruje prvek na strana.

Zde je aplikován v HTML:

Celý tento blok je vystředěn,
ale text uvnitř je zarovnán doleva.

Pokud má váš blok definovanou šířku, vycentruje se uvnitř obsahujícího prvku. Text obsažený v tomto bloku nebude uprostřed, ale bude zarovnán doleva. Je to proto, že text je ve webových prohlížečích zarovnán doleva jako výchozí. Pokud chcete, aby byl text také vycentrován, můžete k vycentrování dělení použít vlastnost zarovnání textu zahrnutou dříve ve spojení s touto metodou.

Centrování obrázků pomocí CSS

Ačkoli většina prohlížečů bude zobrazovat obrázky vycentrované pomocí stejné vlastnosti zarovnání textu, W3C to nedoporučuje. Proto vždy existuje šance, že se budoucí verze prohlížečů mohou rozhodnout tuto metodu ignorovat.

Místo použití zarovnání textu k vycentrování obrázku byste měli prohlížeči výslovně sdělit, že obrázek je prvkem na úrovni bloku. Tímto způsobem jej můžete vycentrovat jako jakýkoli jiný blok. Zde je CSS, aby se to stalo:

img.center {
displej: blok;
levý okraj: auto;
pravý okraj: auto;
}

A tady je HTML obrázku, který má být vycentrován:

Objekty můžete také vycentrovat pomocí vloženého CSS (viz níže), ale tento přístup se nedoporučuje, protože do vašich značek HTML přidává vizuální styly. Pamatujte, že styl a struktura by měly být oddělené; přidání stylů CSS do HTML tuto separaci přeruší, a proto byste se jí měli vyhnout, kdykoli je to možné.

Centrování prvků svisle pomocí CSS

Centrování objektů ve svislém směru bylo při webdesignu vždy náročné, ale uvolnění Flexibilní modul rozvržení CSS v CSS3 poskytuje způsob, jak to udělat.

Svislé zarovnání funguje podobně jako vodorovné zarovnání uvedené výše. Vlastnost CSS je svisle zarovnána, například:

.vcenter {
vertical-align: prostřední;
} 

Všechny moderní prohlížeče podporovat tento styl CSS. Pokud máte problémy se staršími prohlížeči, W3C doporučuje vycentrovat text svisle v kontejneru. Chcete-li tak učinit, umístěte prvky do obsahujícího prvku, například a diva nastavte na něm minimální výšku. Deklarujte obsahující prvek jako buňku tabulky a nastavte svislé zarovnání na „uprostřed“.

Například zde je CSS:

.vcenter {
min. výška: 12em;
displej: buňka tabulky;
vertical-align: prostřední;
}

A tady je HTML:

Tento text je v poli svisle na střed.

Vertikální centrování a starší verze aplikace Internet Explorer

Můžete přinutit aplikaci Internet Explorer (IE), aby vycentrovala a poté použila podmíněné komentáře, takže styly uvidí pouze IE, ale jsou trochu upřímné a nepřitažlivé. Rozhodnutí společnosti Microsoft z roku 2015 zrušit podporu pro starší verze IE, ale bude to bez problémů, protože IE přestane být používán.