Jak vycentrovat obrázek pomocí HTML a CSS

V tomto tutoriálu uvidíme, jak vycentrovat obrázky pomocí HTML a CSS. Není to vůbec složité a pro naše webové stránky to budeme často potřebovat. Uvidíme některé možnosti, jednu, kterou používáme pouze HTML, další pomocí CSS a nakonec pomocí Bootstrap.

HTML a CSS jsou dva přední webové skriptovací jazyky ve světě vytváření webových stránek a aplikací. Na tomto úkolu spolupracují oba jazyky. Zatímco HTML poskytuje webovým stránkám strukturu, CSS se stará o styl a vizuální nebo sluchovou část. HTML poskytuje značky, které obalují různé prvky stránky, a tak společně s atributy vytvoříme kostru našeho webu.

Rozdíly mezi HTML a CSSAbychom to shrnuli, můžeme vidět rozdíly mezi HTML a CSS následovně:

• HTML se snadněji učí a implementuje

• HTML K dispozici ve více jazycích

• HTML je lehký a efektivní

• HTML má omezené zabezpečení

• HTML je poněkud pomalé.

• CSS má větší knihovnu atributů a stylů než CSS

• CSS zkracuje dobu načítání stránky.

• CSS má skvělou kompatibilitu a snadnou údržbu.

• CSS přináší určité problémy s výkonem

• CSS nemá žádné integrované zabezpečení

Dnes se doporučuje provést kroky přímo pomocí CSS, ale pokud máte více HTML, můžete mít také následující možnosti.

1. Jak vycentrovat obrázek na webovou stránku pomocí pouze HTML

Přestože při vytváření těchto možností vycentrování obrázku pomocí HTML uvidíme dva způsoby, jak to udělat snadno.

Středový obrázek s HTML a středovou značkouV této jednoduché možnosti stačí obrázek obalit středovými popisky

• Část „src“ se používá k označení adresy cesty obrázku.

• Alt část poskytuje webové stránce informace o názvu obrázku.

Kromě toho musíme obrázku přiřadit výšku a šířku takto:

  výška = ”250” 

Středový obrázek s HTML a uprostředAle pokud jde o obrázky, tento koncept středu, který jsme viděli, se liší a je lepší použít střední zarovnání, takže kód zůstává následující:

  align = ”střední”> 

Pokud také přidáme text, měli bychom tento kód:

Tento příklad bude vycentrovat obrázek s textem v HTML.  align = ”middle”> Nyní dokončíme náš ukázkový text.

Zarovnat obrázek do HTML pomocí atributu zarovnatPokud chceme obrázek zarovnat vodorovně, můžeme to udělat podobným způsobem, jaký děláme s textem, to znamená použít atribut zarovnání v rámci popisků

nebo. Vytvoříme kód, kde se atribut zobrazí se značkou obrázku. Štítek je jedním z těch, které akceptují atribut align, ale použití je jiné.

Ale jak říkáme, štítek Zde bychom vložili text, který by vyplnil celou pravou část a zabalili obrázek, který jsme umístili. Pokračujeme ve vyplňování textu solvetic solvetic solvetic

Uděláme totéž, abychom zarovnali text a obrázek doleva doprava, ale nahradíme „doleva“ výrazem „vpravo“.

Zde bychom vložili text, který by vyplnil celou pravou část a zabalili obrázek, který jsme umístili. Pokračujeme ve vyplňování textu solvetic solvetic solvetic

Nedoporučuje se to, protože aspekty umístění a stylu by měly být ponechány na CSS a neměly by být používány přímo v HTML. Tímto způsobem budeme mít kód, který se snadněji udržuje a mění, ale pokud jej v daném čase potřebujete pro malý a rychlý test, stojí za to vědět.

2. Jak vycentrovat obrázek na webovou stránku pomocí CSS

Zde budeme mít HTML kód a CSS kód. Začneme pohledem na HTML.

Vložili jsme do obrázku třídu, která se nazývá vycentrovaná, a to nám pomůže později ji stylovat v CSS. Níže je kód pro vycentrování obrázku.

 .center {margin: 10px auto; displej: blok; } 

K zarovnání obrázku pomocí CSS pro naši webovou stránku můžeme také použít následující kód:

 .center {margin-left: auto; okraj-vpravo: auto; }

Pokud to pro vás v prohlížeči nefunguje, protože je použita metoda centrování textu, musíme prohlížeči ukázat, že obrázek je prvek na úrovni bloku. Tímto způsobem jej můžeme vycentrovat, jako by to byl další blok. Použijeme tento kód:

Provedeme, aby prvek vypadal jako blok, a dáme mu automatický okraj (stačí, aby byl okraj automatický na bocích, nahoře i dole, můžete dát, co chcete). Mějte na paměti, že pokud obrázek zabírá celou šířku, nebude vycentrován.

 img.center {display: block; margin-left: auto; okraj-vpravo: auto; }

3. Jak vycentrovat obrázek na webovou stránku pomocí nástroje Bootstrap

S tímto populárním frameworkem je vše jednodušší, stačí do obrazu vložit třídu center-block.

Budete si muset stáhnout Bootstrap a propojit jej nebo vložit své CDN do našeho HTML, proto nechávám váš odkaz níže:

Výsledek použití těchto kódů můžeme vidět na obrázku níže:

Tímto způsobem můžeme jak vycentrovat naše obrázky v HTML, tak pomocí CSS, a tak udělat esteticky úspěšnější webová díla.