Jak vycentrovat obrázek v HTML (s ilustracemi)

Atribut Zarovnání Štítek za zastaralé s příchodem html5. Ačkoli tento atribut stále funguje ve většině webových prohlížečů, doporučuje se zarovnat obrázky pomocí tabulek Cascading Style (CSS). V tomto článku vám řekneme, jak se zaměřte na snímky s CSS a zastaralým značkou Zarovnání.

Kroky

Metoda 1 z 2:

CSS (doporučeno)

jeden. Přidejte kód HTML pro obrázek. Chcete-li vyrovnat obrázek, použijete kaskádové styl listy (CSS), ale bude muset umístit na stránku pomocí HTML. Následuje příklad použití značky Vložení obrazu do kódu:

  Src = "pes.JPG "Alt =" je obrázek psa "Class =" Centrum ">

Namísto Pes.jpg Složte název obrazového souboru a po "ALT" zadejte popis obrázku. Význam Centrum Pro "třídu" se nemění, protože se tímto jménem vytvoříte třídu CSS.

2. Najít CSS kód. Pokud je na webu samostatný soubor CSS, otevřete jej. Pokud ne, kód CSS je s největší pravděpodobností umístěn v horní části souboru HTML uvnitř značek . Vyhledejte na horní část souboru, abyste našli značky .

Pokud tagov Ne, přidejte je. Číst tento článek, Získat více informací.

3. Přidat do CSS kódu pro vyrovnání obrázku. Místo "50%", můžete zadat jinou hodnotu tak, aby obraz se objeví na stránce. Verter obraz s hodnotou "100%" nebude fungovat, takže toto číslo by mělo být jiné.

.Centrum {Display: Block-Margin-Left: Auto-Margin-vpravo: Auto-šířka: 50% -}

4. Uložte provedené změny. Uložte soubor HTML a CSS soubor (pokud je). Takže vycentruje obrázek.

Také uvnitř Tagov může přidat Třída = "centrum", Odstranění jiných obrázků.

Metoda 2 z 2:

Atribut "Zarovnat" v HTML

jeden. Vytvořit nový odstavec. Ačkoli tato metoda centrování obrázků je považován za zastaralý, stále funguje v mnoha prohlížečích. Nicméně, doporučujeme používat CSS, aby fungovaly, když prohlížeče přestanou zachovat zadaný atribut. Nezapomeňte, že atribut Zarovnání vycentroval obraz pouze uvnitř prvku, který ho obklopuje (například uvnitř značek nebo ). Jako příklad v souboru HTML vytvoříme nový odstavec přidáním Na samostatném řádku.

2. Přidejte kód HTML pro obrázek. Po značce zadejte následující kód . Tento příklad použijte jako průvodce:


 Src = "pes.JPG "alt =" obrázek "align =" uprostřed ">

Namísto Pes.jpg Složte název obrazového souboru a po "ALT" zadejte popis obrázku.

"Prostřední" atribut informuje prohlížeč, který by měl být obraz zobrazen ve středu stránky.

3. Zavřít odstavec tag. Chcete-li to přidat Po tagu klipart. Hotový kód by měl vypadat takto:


 Src = "pes.JPG "alt =" obrázek "align =" uprostřed ">

4. Uložte provedené změny. Takže vycentruje obrázek.