Ako vycentrovať obrázok pomocou programovania HTML

...

Na určenie vzhľadu webovej stránky použite CSS.

Kódovač webovej stránky používa jazyk Hypertext Markup Language, aby oznámil webovému prehliadaču funkčný účel každého prvku na stránke, ako je odsek, nadpis alebo zoznam. Od HTML 4 poskytujú kaskádové štýly kóderovi spôsob, ako povedať prehliadaču, ako by mal každý z týchto prvkov vyzerať, nezávisle od toho, čo sú. Stránka môže mať rôzne štýly CSS pre rôzne typy zariadení, ako sú mobilné telefóny a stolné počítače, čo umožňuje meniť vzhľad stránky bez toho, aby kóder musel meniť kód HTML. Na vycentrovanie obrázka použite vlastnosti CSS.

Krok 1

Umiestnite značku "img" do súboru HTML na miesto, kde chcete, aby sa na webovej stránke zobrazil váš obrázok. Musí byť medzi značkami „body“ a za značkami „h1“. Napríklad,

Video dňa

Toto je váš text.

Popis obrázku

definuje obrázok s názvom photo.jpg, ktorý je 170 pixelov široký a 50 pixelov vysoký. Je to prvá vec na stránke po hornom nadpise.

Krok 2

Na definovanie priestoru okolo prvkov stránky, ako sú obrázky, použite atribút CSS „margin“. Hodnota „auto“ pre atribút margin hovorí webovému prehliadaču, aby automaticky určil množstvo miesta. takze

Popis obrázku definuje, že priestor okolo obrázka určuje prehliadač.

Krok 3

Vlastnosť "display" použite na definovanie spôsobu zobrazenia prvku stránky. Hodnota „blok“ pre vlastnosť display hovorí webovému prehliadaču, aby zobrazil prvok na svojom vlastnom riadku s medzerou nad a pod ním. takze Popis obrázku definuje rovnaký obrázok, ale pridanie "display: block;" teraz ho umiestni na vlastný riadok.

Krok 4

Prezrite si webovú stránku v niekoľkých rôznych prehliadačoch, aby ste si overili, či je obrázok správne vycentrovaný.

Tip

Zahrňte popis obrázka do značky „alt“. Vďaka tomu bude vaša stránka prístupnejšia pre čitateľov so zrakovým postihnutím a zabezpečí sa, že váš kód bude v súlade so štandardmi. Popis obrázku