Een div-element verticaal centreren voor alle browsers met behulp van CSS

Bij webontwikkeling is het cruciaal om de lay-out van het element correct te maken. Veel CSS-eigenschappen, zoals CSS3 Flexible Box, zijn echter handig voor het aanpassen van de lay-out van webpagina's en HTML-elementen. Flexible Box wordt gebruikt om webpagina's en applicaties op een recursieve manier te rangschikken. Deze Flexbox-modus helpt bij het maken van lay-outs voor complexe webpagina's en applicaties.

Dit bericht zal u helpen bij het centreren van een div-element voor alle browsers die CSS verticaal gebruiken.

Hoe een div-element uit te lijnen met behulp van CSS?

Het div-element kan verticaal worden uitgelijnd door gebruik te maken van de weergave-eigenschap ' buigen 'samen met de CSS' uitlijnen-items ” eigendom en “ rechtvaardigen-inhoud ' eigenschap. De eigenschap 'align-items' lijnt het element verticaal uit en de eigenschap 'justify-content' lijnt de inhoud horizontaal uit.

Voorbeeld: hoe een div-element verticaal te centreren met CSS?

Voeg in HTML eerst een '

” element en wijs het de klasse toe “ belangrijkste inhoud ”. Voeg tussen de '

'-tags een ' ”-element met de volgende attributen:

---

---

• “ src ” attribuut wordt gebruikt om de URL van de afbeelding te specificeren.
• “ alles ” attribuut definieert wat tekst die wordt weergegeven in plaats van een afbeelding als deze niet kan worden geladen.
• “ breedte ” attribuut wordt gebruikt om de breedte van de afbeelding aan te passen.
• Voeg vervolgens de '

  ”-element om de alinea op de pagina in te sluiten.

Hier is de HTML-code:

< div klas = 'belangrijkste inhoud' >
< img src = '/images/laptop-notepad.jpg' alles = 'Laptop met kladblok en pen' breedte = '300' >
< p > Laptop is een draagbare computer die ook wel bekend staat net zo een notebookcomputer. p >
div >

In CSS zullen we verschillende stylingeigenschappen specificeren voor de div.

Stijl 'main-content' Klasse

.belangrijkste inhoud {
hoogte: vijftig % ;
Achtergrond kleur: #46C2CB;
lettergrootte: 24px;
opvulling: 10px;
}

De volgende CSS-eigenschappen zijn gedefinieerd in de ' belangrijkste inhoud ' klas:

• “ hoogte ” eigenschap wordt gebruikt om de hoogte van de
  container aan te passen.
• “ Achtergrond kleur ” definieert de achtergrondkleur van het element.
• “ lettertypegrootte ” specificeert de lettergrootte van het element.
• “ opvulling ” eigenschap stelt ruimte in rond de inhoud van het element.

Aan de uitvoer kun je zien dat de inhoud van het div-element niet in het midden staat:

Laten we verder gaan om de CSS-eigenschappen toe te passen die helpen om de '

”-element verticaal. Voeg deze eigenschappen toe aan de klasse ' belangrijkste inhoud ” die worden gebruikt om toegang te krijgen tot het

-element:

Scherm: buigen ;
items uitlijnen: centreren;

Hier is de beschrijving:

• “ Scherm ' eigenschap ' buigen ” wordt gebruikt om de div-lay-out flexibel te maken voor zijn element.
• “ uitlijnen-items ” CSS-eigenschap is ingesteld als een “ centrum ”, waarmee de div-elementen verticaal worden uitgelijnd.

Uitgang

U hebt geleerd hoe u een div-element verticaal kunt centreren voor alle browsers met behulp van CSS.

Gevolgtrekking

Om een ​​div-element verticaal te centreren, de CSS ' Scherm ” eigenschap wordt gebruikt met de “ buigen ' waarde. Deze waarde maakt de

-container flexibel voor zijn elementen. Om het div-element verticaal uit te lijnen, past u de ' uitlijnen-items ” eigenschap en ken het een “ centrum ' waarde. Deze blog heeft je laten zien hoe je CSS gebruikt om div-elementen verticaal te centreren in alle browsers.