Sådan centreres et billede i HTML

Forfatter: Mark Sanchez
Oprettelsesdato: 6 Januar 2021
Opdateringsdato: 1 Juli 2024
Anonim
Cost of living in Canada | How much does it cost to live in Toronto, Canada?
Video.: Cost of living in Canada | How much does it cost to live in Toronto, Canada?

Indhold

Attribut justere tag html> er blevet forældet siden HTML5. Selvom denne attribut stadig fungerer i de fleste webbrowsere, anbefales det, at du justerer billeder ved hjælp af Cascading Style Sheets (CSS). I denne artikel vil vi vise dig, hvordan du centrerer billeder ved hjælp af CSS og det forældede tag. justere.

Trin

Metode 1 af 2: CSS (anbefalet)

  1. 1 Tilføj HTML -kode til billedet. Du vil bruge cascading style sheets (CSS) til at justere billedet, men du skal placere det på siden ved hjælp af HTML. Følgende er et eksempel på brug af mærket img> for at indsætte et billede i din kode:

    img src = "dog.webp" alt = "dette er et billede af en hund">

    • I stedet for hund.webp erstat billedfilens navn, og indtast beskrivelsen af ​​billedet efter "alt". Betyder centrum for "klasse" ændres ikke, fordi du vil oprette en CSS -klasse med det navn.
  2. 2 Find CSS -koden. Hvis dit websted har en separat CSS -fil, skal du åbne den. Hvis ikke, er CSS højst sandsynligt øverst i HTML -filen inde i koderne hoved>... Rul til toppen af ​​filen for at finde tags style> / style>.
    • Hvis tags style> / style> nej, tilføj dem. Læs denne artikel for mere information.
  3. 3 Tilføj CSS for at justere billedet. I stedet for "50%" kan du indtaste en anden værdi for at få billedet vist på siden. Du vil ikke være i stand til at centrere billedet med en værdi på "100%", så dette tal burde være anderledes.

    .center {display: block; margin-venstre: auto; margin-højre: auto; bredde: 50%; }

  4. 4 Gem dine ændringer. Gem HTML -filen og CSS -filen (hvis nogen). Dette vil centrere billedet.
    • Også inde i tags img> kan tilføje at centrere andre billeder.

Metode 2 af 2: Attributten "align" i HTML

  1. 1 Opret et nyt afsnit. Selvom denne metode til centrering af billeder er blevet forældet, fungerer den stadig i mange browsere. Vi anbefaler dog at bruge CSS til at holde webstedet funktionelt, når browsere holder op med at understøtte den angivne attribut. Husk at attributten justere vil centrere billedet kun inde i elementet, der omgiver det (f.eks. inde i tags p> / p> eller div> / div>). Som et eksempel vil vi i HTML -filen oprette et nyt afsnit ved at tilføje p> på en separat linje.
  2. 2 Tilføj HTML -kode til billedet. Indtast følgende kode efter mærket p>... Brug dette eksempel som en vejledning:

    p> img src = "dog.webp" alt = "billede" align = "midten">

    • I stedet for hund.webp erstat billedfilens navn, og indtast beskrivelsen af ​​billedet efter "alt".
    • Den midterste attribut fortæller browseren at vise billedet i midten af ​​siden.
  3. 3 Luk afsnitsmærket. For at gøre dette skal du tilføje / p> efter billedmærket. Den færdige kode skal se sådan ud:

    p> img src = "dog.webp" alt = "billede" align = "midten"> / p>

  4. 4 Gem dine ændringer. Dette vil centrere billedet.