Obsah

• Kroky
• Metóda 1 z 2: CSS (odporúčané)
• Metóda 2 z 2: Atribút „align“ v HTML

Pripisovať zarovnať tag html> je od HTML5 zastaraný. Aj keď tento atribút stále funguje vo väčšine webových prehliadačov, odporúča sa zarovnať obrázky pomocou kaskádových štýlov (CSS). V tomto článku vám ukážeme, ako vycentrovať obrázky pomocou CSS a zastaranej značky. zarovnať.

Kroky

Metóda 1 z 2: CSS (odporúčané)

1. 1 Pridajte k obrázku HTML kód. Na zarovnanie obrázku použijete kaskádové štýly (CSS), ale budete ho musieť umiestniť na stránku pomocou HTML. Nasleduje príklad použitia značky obr.> vloženie obrázku do kódu:

   img src = "dog.webp" alt = "toto je obrázok psa">

   • Namiesto pes.webp nahraďte názov súboru s obrázkom a za „alt“ zadajte popis obrázku. Význam centrum pre „triedu“ nemeňte, pretože vytvoríte triedu CSS s týmto názvom.
2. 2 Nájdite kód CSS. Ak má váš web samostatný súbor CSS, otvorte ho. Ak nie, CSS je s najväčšou pravdepodobnosťou v hornej časti súboru HTML, vnútri značiek hlava>... Prejdite do hornej časti súboru a vyhľadajte značky štýl> / štýl>.
   • Ak značky štýl> / štýl> nie, pridajte ich. Viac informácií nájdete v tomto článku.
3. 3 Na zarovnanie obrázku pridajte CSS. Namiesto „50%“ môžete zadať inú hodnotu, aby sa obrázok zobrazil na stránke. Nebudete môcť vycentrovať obrázok s hodnotou „100%“, takže toto číslo by malo byť iné.

   .center {display: block; okraj-vľavo: auto; okraj-vpravo: auto; šírka: 50%; }

4. 4 Uložte zmeny. Uložte súbor HTML a súbor CSS (ak existuje). Tým sa obraz vycentruje.
   • Tiež vo vnútri značiek obr.> môže pridať na vycentrovanie ostatných obrázkov.

Metóda 2 z 2: Atribút „align“ v HTML

1. 1 Vytvorte nový odsek. Napriek tomu, že tento spôsob centrovania obrázkov je zastaraný, v mnohých prehliadačoch stále funguje. Odporúčame však používať CSS, aby bola webová stránka funkčná aj vtedy, keď prehliadače prestanú podporovať uvedený atribút. Pamätajte si, že atribút zarovnať vycentruje obrázok iba dovnútra prvku, ktorý ho obklopuje (napríklad vo vnútri značiek p> / p> alebo div> / div>). Napríklad v súbore HTML vytvoríme nový odsek pridaním p> na samostatnom riadku.
2. 2 Pridajte k obrázku HTML kód. Za značku zadajte nasledujúci kód p>... Ako príklad použite tento príklad:

   p> img src = "dog.webp" alt = "obrázok" align = "stred">

   • Namiesto pes.webp nahraďte názov súboru s obrázkom a za „alt“ zadajte popis obrázku.
   • Stredný atribút hovorí prehliadaču, aby zobrazil obrázok v strede stránky.
3. 3 Zatvorte značku odseku. Ak to chcete urobiť, pridajte / p> za značku obrázku. Hotový kód by mal vyzerať takto:

   p> img src = "dog.webp" alt = "obrázok" align = "stred"> / p>

4. 4 Uložte zmeny. Tým sa obraz vycentruje.