Ako vycentrovať obrázok v html (s ilustráciami)

Atribút Zarovnať Tag považované za zastarané s príchodom HTML5. Hoci tento atribút stále funguje vo väčšine webových prehliadačov, odporúča sa zarovnať snímky pomocou kaskádových štýlov stolov (CSS). V tomto článku vám povieme, ako vycentrovať obrázky s CSS a zastaranou značkou Zarovnať.

Kroky

Metóda 1 z 2:

CSS (odporúča sa)

jeden. Pridajte kód HTML pre obrázok. Ak chcete zarovnať obrázok, použijete kaskádové štýlové listy (CSS), ale bude musieť umiestniť na stránku pomocou HTML. Nasleduje príklad použitia značky Ak chcete vložiť obrázok do kódu:

  Src ="pes.jpg" alt ="Toto je obrázok psa" trieda ="Centrum">

Namiesto pes.jpg Podávajte meno obrazového súboru a po "Alt" zadajte obrázok. Význam Centrum Pre "triedu" sa nemenia, pretože vytvoríte triedu CSS s týmto menom.

2. Nájsť kód CSS. Ak je na mieste samostatný súbor CSS, otvorte ho. Ak nie, CSS kód je s najväčšou pravdepodobnosťou umiestnený v hornej časti HTML súboru vnútri tagov . Prejdite na začiatok súboru, ktorý chcete vyhľadať tagy .

Ak tagov Nie, pridajte ich. Čítať tento článok, Získať viac informácií.

3. Pridať do CSS kód na zarovnutie obrázka. Namiesto "50%" môžete zadať inú hodnotu, aby sa obrázok zobrazoval na stránke. Cestovanie obraz s hodnotou "100%" nebude fungovať, takže toto číslo by malo byť iné.

.Centrum {Display: Block-Margin-Left: Auto-Margin-Right: Auto-šírka: 50% -}

4. Uložte vykonané zmeny. Uložte súbor HTML a CSS súbor (ak je). Takže vycentrujete obrázok.

Tiež vnútri tagov môže pridať trieda ="Centrum", Ak chcete odstrániť iné obrázky.

Metóda 2 z 2:

Atribút "ALIGN" V HTML

jeden. Vytvorte nový odsek. Hoci táto metóda centrovania obrazu je považovaná za zastaranú, stále funguje v mnohých prehliadačoch. Avšak, odporúčame používať CSS na funkciu, keď prehliadače prestanú udržiavať zadaný atribút. Pamätajte, že atribút Zarovnať Vycentrovaný obraz len vo vnútri prvku, ktorý ho obklopuje (napríklad vo vnútri tagov alebo ). Ako príklad v súbore HTML vytvoríme nový odsek pridaním Na samostatnom riadku.

2. Pridajte kód HTML pre obrázok. Zadajte nasledujúci kód po tag . Tento príklad použite ako príručku:


 Src ="pes.jpg" alt ="obraz" ALIGN ="Stredný">

Namiesto pes.jpg Podávajte meno obrazového súboru a po "Alt" zadajte obrázok.

Atribút "stredný" informuje prehliadač, že obraz sa má zobraziť v strede stránky.

3. ZAOBCHÁDZAJÚCE SA PODPORA. Na tento účel Po tag Clip Art. Dokončený kód by mal vyzerať takto:


 Src ="pes.jpg" alt ="obraz" ALIGN ="Stredný">

4. Uložte vykonané zmeny. Takže vycentrujete obrázok.