I když to není nutně obtížné, centrování obrázků na vašich webových stránkách může být více zapojeno, než si myslíte. Hlavním důvodem je to tag je inline element, takže se chová jinak než elementy na úrovni bloku. Některé přístupy používají HTML; jiní používají CSS, a někteří jsou zvažováni více “správný” než jiní v tom, že nejsou zastaralé. Chcete-li pokračovat, vyberte metodu ze seznamu níže a postupujte podle pokynů.

Pro podporu v HTML5 byste měli použít atribut stylu s hodnotou text-align: uprostřed uvnitř elementu na úrovni bloku; jako například tagy.

Příklad HTML kódu

Tip: Přidání vloženého stylu, jak je uvedeno výše, by mělo být provedeno pouze jednou, pokud potřebujete vycentrovat více obrázků, měli byste použít níže uvedený návrh a vytvořit třídu CSS, která vám pomůže redukovat nadbytečný kód a urychlit webovou stránku.

Příklad obrazového centra pomocí výše uvedeného kódu

Převod na prvek na úrovni bloku

Jeden způsob, jak správně vycentrovat obrazy, je definovat elementem na úrovni bloku. Chcete-li to provést, přidejte pravidlo do hlavy stránky (viz následující příklad) nebo do propojeného externího souboru CSS.

Příklad HTML kódu

 .centerImage {text-align: center; zobrazení: blok; } 

S tímto kódem můžete použít třídu centerImage na tagu bez nutnosti vnoření do elementu na úrovni bloku. Tato metoda funguje pro více obrazů.

Příklad středového obrazového kódu

Použití značek

Obrázek můžete vycentrovat vložením značka v tagy. Tato akce vycentruje, a to pouze, obrázek na webové stránce. Je třeba poznamenat, že tato metoda je v HTML5 zastaralá a nebude vždy fungovat ve všech prohlížečích, které budou pokračovat. Doporučujeme použít tuto metodu pouze tehdy, pokud žádný z dalších návrhů uvedených výše nefunguje tam, kde se snažíte vycentrovat obraz.

Příklad HTML kódu