Hur man centrerar bilder med CSS

Vill du centrera en bild med CSS? Anpassningsproblem är ofta en källa till frustration för webbdesigners. Lyckligtvis är det väldigt enkelt att centrera en bild med CSS, och vi visar dig hur du får detta gjort i några få steg.

Som med många webbdesignuppgifter finns det mer än ett sätt att få detta gjort! Vi kommer att täcka tre huvudmetoder i den här artikeln. Låt oss börja!

1. Använd marginalen Egenskap

Ställa in marginal egenskap är ett av de enklaste sätten att centrera en bild horisontellt med CSS. Marginaler är en kärnkomponent i CSS-boxmodellen.

Först måste du förvandla bildelementet från ett inline-element till ett block. HTML-element på blocknivå upptar hela bredden av sitt överordnade element och kan ta upp hela bredden på en sida.

Genom att göra ett bildelement till ett blockelement kan du sedan manipulera dess position genom att justera dess horisontella marginaler. Du måste också ställa in en specifik bredd för bilden för att avgöra hur mycket utrymme bilden tar upp på sidan.

Oavsett vilken bredd du väljer måste bilden ha samma vänster- och högermarginaler. Du kan enkelt uppnå detta genom att ge marginalegenskapen ett värde på

bil:

img.center {
 display: block;
 marginal-vänster: auto;
 margin-right: auto;
 bredd: 800px;
}

2. Använd Flexbox Layout

Denna metod kräver att bilden placeras i ett element på blocknivå, vanligtvis en div:

När du har gjort detta kan du lägga till några egenskaper för att manipulera dess utseende. Du kommer att använda två CSS-egenskaper.

Den första är visa egendom med dess värde satt till böja. Du kan också använd flex för att justera element i HTML. Den andra egenskapen du lägger till din div är motivera-innehåll, med dess värde inställt på Centrum såhär:

div.center {
 display: flex;
 motivera-innehåll: center;
}

3. Använd det föråldrade mittelementet

Bästa metoder för webben uppmuntrar dig att använda CSS för styling och HTML för semantik, så du bör inte använda den här HTML-metoden. De Centrum taggen, som centrerar sitt innehåll horisontellt, är utfasad i HTML5.

Men om du måste, här är hur du centrerar en bild med enbart HTML. Slå helt enkelt in img tagga i en centertagg så här:

Det är hur du justerar dina bilder i HTML

Vi har visat dig tre olika, lättanvända metoder för att centrera dina bilder i ett HTML-dokument. Prova dem alla och välj den som fungerar bäst för dig. Undvik den tredje metoden om du inte har något val!

En sak att tänka på är att det finns en hel del fler sätt att centrera bilder med HTML och CSS. En vanlig metod som fungerar för både text och inlinebilder är textjustera fast egendom.

Hur man centrerar text på din webbsida med CSS

Läs Nästa

Om författaren