Jak vycentrovat obrázky pomocí CSS

Chcete vycentrovat obrázek pomocí CSS? Problémy se zarovnáním jsou často zdrojem frustrace pro webové designéry. Naštěstí je vystředění obrázku pomocí CSS opravdu jednoduché a my vám v několika krocích ukážeme, jak to udělat.

Stejně jako u mnoha úkolů v oblasti webdesignu existuje více než jeden způsob, jak toho dosáhnout! V tomto článku se budeme zabývat třemi hlavními metodami. Začněme!

1. Použijte vlastnost okraje

Nastavení okraj vlastnost je jedním z nejjednodušších způsobů, jak horizontálně vycentrovat obrázek pomocí CSS. Marže jsou základní součástí krabicový model CSS.

Nejprve budete muset transformovat prvek obrázku z vloženého na blokový. Prvky HTML na úrovni bloku zabírají celou šířku svého nadřazeného prvku a jsou schopny zabírat celou šířku stránky.

Když z prvku obrázku uděláte blokový prvek, můžete upravit jeho polohu úpravou vodorovných okrajů. Budete také muset nastavit konkrétní šířku obrázku, abyste určili, kolik místa obrázek na stránce zabírá.

Bez ohledu na šířku, kterou zvolíte, obrázek bude muset mít stejný levý a pravý okraj. Toho lze snadno dosáhnout tím, že vlastnosti margin dáte hodnotu

auto:

img.center {
 displej: blok;
 okraj-levý: auto;
 pravý okraj: auto;
 šířka: 800px;
}

2. Použijte rozvržení Flexbox

Tato metoda vyžaduje vložení obrázku do prvku na úrovni bloku, obvykle a div:

Jakmile to uděláte, můžete přidat některé vlastnosti a upravit jeho vzhled. Použijete dvě vlastnosti CSS.

První z nich je Zobrazit vlastnost s nastavenou hodnotou flex. Můžete také použijte flex k zarovnání prvků v HTML. Druhá vlastnost, kterou přidáte do svého div, je ospravedlnit-obsah, s jeho hodnotou nastavenou na centrum jako tak:

div.center {
 displej: flex;
 justify-content: center;
}

3. Použijte zastaraný středový prvek

Doporučené postupy pro web doporučují používat CSS pro stylování a HTML pro sémantiku, takže byste tuto metodu HTML neměli používat. The centrum Značka, která vycentruje svůj obsah vodorovně, je v HTML5 zastaralá.

Ale pokud musíte, zde je návod, jak vycentrovat obrázek pomocí samotného HTML. Jednoduše zabalte img tag ve středovém tagu takto:

Takto lze zarovnat obrázky v HTML

Ukázali jsme vám tři různé, snadno použitelné metody vystředění obrázků v dokumentu HTML. Vyzkoušejte je všechny a vyberte si ten, který vám nejlépe vyhovuje. Vyhněte se třetí metodě, pokud nemáte absolutně na výběr!

Jedna věc, kterou je třeba mít na paměti, je, že existuje několik dalších způsobů, jak vycentrovat obrázky pomocí HTML a CSS. Jedna běžná metoda, která funguje jak pro text, tak pro vložené obrázky, je zarovnání textu vlastnictví.

Jak zarovnat text na střed vaší webové stránky pomocí CSS

Přečtěte si další

O autorovi