Hur man vertikalt centrerar ett div-element för alla webbläsare som använder CSS

I webbutveckling är det avgörande att skapa elementets layout ordentligt. Men många CSS-egenskaper, som CSS3 Flexible Box, är användbara för att justera layouten på webbsidor och HTML-element. Flexible Box används för att arrangera webbsidor och applikationer på ett rekursivt sätt. Detta Flexbox-läge hjälper till att skapa layouter för komplexa webbsidor och applikationer.

Det här inlägget kommer att guida dig om hur du centrerar ett div-element för alla webbläsare som använder CSS vertikalt.

Hur justerar man div-element med CSS?

div-elementet kan justeras vertikalt genom att använda visningsegenskapen ' böja ' tillsammans med CSS ' align-objekt ' egendom och ' motivera-innehåll ' fast egendom. Egenskapen 'align-items' justerar elementet vertikalt, och 'justify-content' -egenskapen justerar innehållet horisontellt.

Exempel: Hur centrerar man ett div-element vertikalt med CSS?

I HTML lägger du först till ett '

' element och tilldela det klassen ' huvudinnehåll ”. Mellan '

'-taggarna lägger du till ett ' ' element med följande attribut:

---

---

• ' src ”-attributet används för att ange webbadressen till bilden.
• ' allt ”-attribut definierar viss text som visas i stället för en bild om den inte kan laddas.
• ' bredd ”-attribut används för att justera bildens bredd.
• Lägg sedan till '

  ” för att bädda in stycket på sidan.

Här är HTML-koden:

< div klass = 'huvudinnehåll' >
< img src = '/images/laptop-notepad.jpg' allt = 'Bärbar dator med anteckningsblock och penna' bredd = '300' >
< sid > Laptop är en bärbar dator också känd som en bärbar dator. sid >
div >

I CSS kommer vi att specificera flera stylingegenskaper till div.

Stil 'huvudinnehåll' Klass

.huvudinnehåll {
höjd: femtio % ;
bakgrundsfärg: #46C2CB;
teckenstorlek: 24px;
stoppning: 10px;
}

Följande CSS-egenskaper definieras i ' huvudinnehåll ' klass:

• ' höjd ”-egenskapen används för att justera höjden på
  -behållaren.
• ' bakgrundsfärg ” definierar elementets bakgrundsfärg.
• ' textstorlek ” anger elementets teckenstorlek.
• ' stoppning ” egenskapen sätter utrymme runt elementets innehåll.

Från utgången kan du observera att innehållet i div-elementet inte är i mitten:

Låt oss gå vidare för att tillämpa CSS-egenskaperna som hjälper till att centrera '

' element vertikalt. Lägg till dessa egenskaper i klassen ' huvudinnehåll ' som används för att komma åt elementet

:

visa: böja ;
align-items: center;

Här är beskrivningen:

• ' visa ' fast egendom ' böja ” används för att göra div-layouten flexibel för sitt element.
• ' align-objekt ' CSS-egenskap är inställd som en ' Centrum ”, vilket kommer att justera div-elementen vertikalt.

Produktion

Du har lärt dig hur du centrerar ett div-element vertikalt för alla webbläsare som använder CSS.

Slutsats

För att vertikalt centrera ett div-element, CSS ' visa ” fastigheten används med ” böja ' värde. Detta värde gör

-behållaren flexibel för dess element. För att justera div-elementet vertikalt, justera ' align-objekt ' egenskap och tilldela den en ' Centrum ' värde. Den här bloggen har visat dig hur du använder CSS för att vertikalt centrera div-element i alla webbläsare.