Innehåll

• Steg
• Metod 1 av 2: CSS (rekommenderas)
• Metod 2 av 2: Attributet "align" i HTML

Attribut justera märka html> har tagits bort sedan HTML5. Även om detta attribut fortfarande fungerar i de flesta webbläsare, rekommenderas att du justerar bilder med hjälp av Cascading Style Sheets (CSS). I den här artikeln kommer vi att visa dig hur du centrerar bilder med CSS och den utfasade taggen. justera.

Steg

Metod 1 av 2: CSS (rekommenderas)

1. 1 Lägg till HTML -kod för bilden. Du kommer att använda kaskadstilark (CSS) för att anpassa bilden, men du måste placera den på sidan med HTML. Följande är ett exempel på hur du använder taggen img> för att infoga en bild i din kod:

   img src = "dog.webp" alt = "detta är en bild på en hund">

   • Istället för hund.webp ersätt namnet på bildfilen och ange beskrivningen av bilden efter "alt". Menande Centrum för "klass" ändras inte, eftersom du kommer att skapa en CSS -klass med det namnet.
2. 2 Hitta CSS -koden. Om din webbplats har en separat CSS -fil, öppna den. Om inte är CSS troligtvis högst upp i HTML -filen, inuti taggarna huvud>... Bläddra till toppen av filen för att hitta taggar stil> / stil>.
   • Om taggar stil> / stil> nej, lägg till dem. Läs den här artikeln för mer information.
3. 3 Lägg till CSS för att justera bilden. I stället för "50%" kan du ange ett annat värde för att bilden ska visas på sidan. Du kommer inte att kunna centrera bilden med värdet "100%", så det här numret borde vara annorlunda.

   .center {display: block; marginal-vänster: auto; marginal-höger: auto; bredd: 50%; }

4. 4 Spara dina ändringar. Spara HTML -filen och CSS -filen (om sådan finns). Detta kommer att centrera bilden.
   • Även inuti taggar img> kan Adda för att centrera andra bilder.

Metod 2 av 2: Attributet "align" i HTML

1. 1 Skapa ett nytt stycke. Även om denna metod för att centrera bilder har föråldrats, fungerar den fortfarande i många webbläsare. Vi rekommenderar dock att du använder CSS för att hålla webbplatsen funktionell när webbläsare slutar stödja det angivna attributet. Kom ihåg att attributet justera centrerar bilden bara inuti elementet som omger den (till exempel inuti taggar p> / p> eller div> / div>). Som ett exempel, i HTML -filen, skapar vi ett nytt stycke genom att lägga till p> på en separat rad.
2. 2 Lägg till HTML -kod för bilden. Ange följande kod efter taggen p>... Använd detta exempel som en guide:

   p> img src = "dog.webp" alt = "bild" align = "mitten">

   • Istället för hund.webp ersätt namnet på bildfilen och ange beskrivningen av bilden efter "alt".
   • Det mittersta attributet uppmanar webbläsaren att visa bilden i mitten av sidan.
3. 3 Stäng stycke -taggen. För att göra detta, lägg till / p> efter bildtaggen. Den färdiga koden ska se ut ungefär så här:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 Spara dina ändringar. Detta kommer att centrera bilden.