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 „ Most nyissa meg a div tárolót a „ id ' attribútum neve választóval ' # ” és alkalmazza a következő CSS-tulajdonságokat: Megfigyelhető, hogy sikeresen középre igazítottuk az igazított szöveget vízszintesen a létrehozott 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: Kimenet 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
< 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
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:
Hogyan lehet szöveget függőlegesen középre helyezni a div belsejében?
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:
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