Hur kan jag centrera text (horisontellt och vertikalt) inuti en div

Hur Kan Jag Centrera Text Horisontellt Och Vertikalt Inuti En Div



När utvecklare designar webbsidor kan de lägga till olika komponenter, inklusive bilder, text, tabeller och andra. Dessutom kan text centreras i en div med hjälp av flera CSS-egenskaper. Den mest populära metoden för horisontell centrering av text är att använda ' textjustera ' attribut. Dessutom kan du också använda ' radavstånd ' och ' vertikaljustera ”-attribut för vertikal justering av texten.

Det här inlägget kommer att ange metoden för att centrera texten vertikalt såväl som horisontellt inuti en div.:







Hur centrerar man text horisontellt inuti en div?

För att centrera text horisontellt inuti en div, kolla in den givna proceduren.



Steg 1: Gör en div-behållare



Skapa först en div-behållare med hjälp av '

' element. Sätt sedan in en ' id ”-attribut inuti div-öppningstaggen. Efter det, bädda in lite text mellan div-taggen:





< div id = 'align-content' >
Linuxhint är en av de bästa webbplatserna för innehållsskapande.
div >


Produktion


Steg 2: Gå till div-behållare för att centrera text



Gå nu till div-behållaren med hjälp av ' id ' attributnamn med väljare ' # ' och tillämpa följande CSS-egenskaper:

#align-content{
bredd: 80 % ;
marginal: 0 bil;
stoppning: 20px;
bakgrund: #c8edf3;
text-align: center;
färg: rgb ( 49 , femton , 240 ) ;
}


Här:

    • ' bredd ”-egenskapen används för att ställa in behållarens breddstorlek.
    • ' marginal ” anger ett tomt utrymme utanför behållaren.
    • ' stoppning ” definierar ett utrymme innanför elementets gräns.
    • ' bakgrund ” ställer in bakgrundsfärgen på baksidan av elementet.
    • ' textjustera ' egenskapen används för att ställa in justeringen av texten som ' Centrum ”.
    • ' Färg ” anger en färg för texten innanför gränsen.

Det kan observeras att vi framgångsrikt har centrerat justerad text horisontellt inuti den skapade div:

Hur man centrerar text vertikalt inuti en div?

Följ instruktionerna för att centrera text vertikalt inuti en div-behållare.

Steg 1: Gå till div-behållaren

Först av allt, gå till den skapade div-behållaren.

Steg 2: Tillämpa CSS-egenskaper på Centrera text vertikalt

Använd sedan CSS-egenskaperna nedan för att centrera text vertikalt i en div:

#align-content{
display: tabell-cell;
bredd: 300px;
höjd: 150px;
stoppning: 10px;
färgen blå;
bakgrundsfärg: rgb ( 248 , 215 , 166 ) ;
kantlinje: 3px streckad #f09d03;
vertikal-align: mitten;
}


Enligt ovanstående kodavsnitt:

    • Ställ in ' visa ' som specificerar visningsbeteendet för elementet som ' tabell-cell ”, vilket betyder att den fungerar som cellen i tabellen i div-elementet.
    • ' bredd ” egenskapen anger elementets breddstorlek.
    • ' höjd ” ställer in höjden på elementet.
    • ' stoppning ” definierar ett tomt utrymme inuti elementet.
    • ' Färg ” används för att ställa in färgen på texten inuti elementet.
    • ' bakgrundsfärg ” anger färgen på elementets baksida.
    • ' gräns ” egenskap definierar en gräns på ett element.
    • ' vertikaljustera '-egenskapen används för att ställa in den vertikala justeringen av ett definierat element i ' mitten ”.

Produktion


Du har lärt dig om hela proceduren för att centrera texten inuti behållaren på båda sätten, vertikalt och horisontellt.

Slutsats

För att centrera texten vertikalt och horisontellt inuti en div, skapa först en div-behållare med hjälp av

-elementet och få tillgång till den genom att använda väljaren. Använd sedan CSS-egenskaper där ' textjustera ' egenskapen används för horisontell justering, och ' vertikaljustera ” ställer in vertikal justering. Det här inlägget demonstrerade metoderna för att centrera texten vertikalt och horisontellt inuti en div.