Hogyan helyezhetem középre a szöveget (vízszintesen és függőlegesen) egy div belsejében

Hogyan Helyezhetem Kozepre A Szoveget Vizszintesen Es Fuggolegesen Egy Div Belsejeben



A weboldalak tervezése során a fejlesztők különféle összetevőket, például képeket, szöveget, táblázatokat és egyebeket adhatnak hozzá. Ezenkívül a szöveg középre igazítható egy div-ben több CSS-tulajdonság használatával. A szöveg vízszintes központosításának legnépszerűbb módja a „ szöveg igazítás ' tulajdonság. Ezenkívül használhatja a „ vonalmagasság ” és „ függőleges igazítás ” attribútumok a szöveg függőleges igazításához.

Ez a bejegyzés bemutatja a szöveg függőleges és vízszintes középre helyezésének módját egy div.







Hogyan lehet a szöveget vízszintesen középre helyezni a div belsejében?

Ha vízszintesen szeretné középre helyezni a szöveget a div-ben, nézze meg a megadott eljárást.



1. lépés: Hozzon létre egy div tárolót



Kezdetben hozzon létre egy div tárolót a „

” elemet. Ezután illesszen be egy „ id ” attribútumot a div nyitócímkén belül. Ezt követően ágyazzon be szöveget a div címke közé:





< div id = 'tartalom igazítása' >
A Linuxhint az egyik legjobb webhely számára tartalom létrehozása.
div >


Kimenet


2. lépés: Nyissa meg a div tárolót a Szöveg középre igazításához



Most nyissa meg a div tárolót a „ id ' attribútum neve választóval ' # ” és alkalmazza a következő CSS-tulajdonságokat:

#align-content{
szélesség: 80 % ;
árrés: 0 auto;
padding: 20px;
háttér: #c8edf3;
szöveg igazítása: középre;
szín: rgb ( 49 , tizenöt , 240 ) ;
}


Itt:

    • ' szélesség ” tulajdonság a konténer szélességi méretének beállítására szolgál.
    • ' árrés ” egy üres helyet ad meg a tárolón kívül.
    • ' párnázás ” az elem határán belüli teret határoz meg.
    • ' háttér ” beállítja a háttérszínt az elem hátulján.
    • ' szöveg igazítás ' tulajdonság a szöveg igazításának beállítására szolgál: ' központ ”.
    • ' szín ” a határon belüli szöveg színét adja meg.

Megfigyelhető, hogy sikeresen középre igazítottuk az igazított szöveget vízszintesen a létrehozott div belsejében:

Hogyan lehet szöveget függőlegesen középre helyezni a div belsejében?

Ha a szöveget függőlegesen szeretné középre helyezni egy div tárolóban, kövesse a mellékelt utasításokat.

1. lépés: Nyissa meg a div tárolót

Először is nyissa meg a létrehozott div tárolót.

2. lépés: Alkalmazza a CSS-tulajdonságokat a Szöveg függőleges középpontjára

Ezután alkalmazza az alább felsorolt ​​CSS-tulajdonságokat, hogy függőlegesen középre állítsa a szöveget divben:

#align-content{
kijelző: táblázat-cella;
szélesség: 300 képpont;
magasság: 150 képpont;
padding: 10px;
szín: kék;
háttérszín: rgb ( 248 , 215 , 166 ) ;
szegély: 3 képpont szaggatott #f09d03;
függőleges igazítás: középen;
}


A fenti kódrészlet szerint:

    • Állítsa be a ' kijelző ', amely az elem megjelenítési viselkedését határozza meg: ' tábla-cella ”, ami azt jelenti, hogy úgy működik, mint a tábla cellája a div elemben.
    • ' szélesség ” tulajdonság határozza meg az elem szélességének méretét.
    • ' magasság ” állítja be az elem magasságát.
    • ' párnázás ” egy üres helyet határoz meg az elem belsejében.
    • ' szín ” az elemen belüli szöveg színének beállítására szolgál.
    • ' háttérszín ” határozza meg az elem hátoldalának színét.
    • ' határ ” tulajdonság határvonalat határoz meg egy elemen.
    • ' függőleges igazítás ' tulajdonság egy meghatározott elem függőleges igazításának beállítására szolgál a ' középső ”.

Kimenet


Megtanulta a teljes eljárást, amellyel a szöveget a tárolóban mindkét irányban, függőlegesen és vízszintesen középre kell helyezni.

Következtetés

Ha a szöveget függőlegesen és vízszintesen középre szeretné helyezni egy div-ben, először hozzon létre egy div tárolót a

elem segítségével, és a választó segítségével érje el. Ezután alkalmazza a CSS-tulajdonságokat, amelyekben a ' szöveg igazítás ' tulajdonság a vízszintes igazításhoz használatos, és a ' függőleges igazítás ” állítja be a függőleges igazítást. Ez a bejegyzés bemutatta a szöveg függőleges és vízszintes középpontba helyezésének módszereit egy divben.