Jak vycentrovat obrázek pomocí programování HTML

...

Použijte CSS k určení vzhledu webové stránky.

Kodér webové stránky používá jazyk Hypertext Markup Language, aby sdělil webovému prohlížeči funkční účel každého prvku na stránce, jako je odstavec, nadpis nebo seznam. Od HTML 4 poskytují kaskádové styly kodérovi způsob, jak sdělit prohlížeči, jak by měl každý z těchto prvků vypadat, nezávisle na definování toho, co jsou. Stránka může mít různé styly CSS pro různé typy zařízení, jako jsou mobilní telefony a stolní počítače, což umožňuje měnit vzhled stránky, aniž by kodér musel měnit kód HTML. K vystředění obrázku použijte vlastnosti CSS.

Krok 1

Umístěte značku "img" do souboru HTML na místo, kde chcete na webové stránce zobrazit obrázek. Musí být mezi značkami „body“ a za značkami „h1“. Například,

Video dne

Toto je váš text.

Popis obrázku

definuje obrázek s názvem photo.jpg, který je 170 pixelů široký a 50 pixelů vysoký. Je to první věc na stránce za horním nadpisem.

Krok 2

Pomocí atributu CSS „margin“ definujte prostor kolem prvků stránky, jako jsou obrázky. Hodnota "auto" pro atribut margin říká webovému prohlížeči, aby automaticky určil množství místa. Tak,

Popis obrázku definuje, že prostor kolem obrázku je určen prohlížečem.

Krok 3

Pomocí vlastnosti "display" definujte způsob zobrazení prvku stránky. Hodnota "block" pro vlastnost display říká webovému prohlížeči, aby zobrazil prvek na vlastním řádku s mezerou nad a pod ním. Tak, Popis obrázku definuje stejný obrázek, ale přidání "display: block;" nyní jej umístí na vlastní řádek.

Krok 4

Prohlédněte si webovou stránku v několika různých prohlížečích a ověřte, zda je obrázek správně vycentrován.

Spropitné

Zahrňte popis obrázku do značky „alt“. Díky tomu bude vaše stránka přístupnější pro nevidomé čtenáře a zajistí, že váš kód bude v souladu se standardy. Popis obrázku