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 ' Gå nu till div-behållaren med hjälp av ' id ' attributnamn med väljare ' # ' och tillämpa följande CSS-egenskaper: Det kan observeras att vi framgångsrikt har centrerat justerad text horisontellt inuti den skapade 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: Produktion För att centrera texten vertikalt och horisontellt inuti en div, skapa först en div-behållare med hjälp av
< 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
bredd: 80 % ;
marginal: 0 bil;
stoppning: 20px;
bakgrund: #c8edf3;
text-align: center;
färg: rgb ( 49 , femton , 240 ) ;
}
Här:
Hur man centrerar text vertikalt inuti en div?
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:
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