logo

Kaip centruoti lentelę CSS?

Lentelių naudojimas kuriant svetainę yra įdomi užduotis. Pagal numatytuosius nustatymus lentelė lygiuojama į kairę, bet naudojant marža nuosavybė CSS , galime ją sulygiuoti centre.

Jei nustatysime reikšmę paraštė-kairė ir paraštė-dešinė į automatinis , tada naršyklės rodo lentelę centre. Galime naudoti stenografijos savybę marža ir nustatykite automatinis stalui išlygiuoti centre, o ne naudoti paraštė-kairė ir paraštė-dešinė nuosavybė.

padaryti sh scenarijų vykdomąjį

Užuot išlyginę lentelę centre, teksto lygiavimas: centre; ypatybė centruoja tik lentelės turinį, pvz., tekstą lentelės viduje.

Supraskime tai naudodami iliustraciją.

Pavyzdys

Šiame pavyzdyje mes naudojame teksto lygiavimas: centre; savybė centruoti turinį lentelės viduje ir paraštė-kairė: automatinis; ir paraštė-dešinė: automatinis; stalui centruoti.

np.argmax
 table, th, td { border: 1px solid black; margin-left: auto; margin-right: auto; border-collapse: collapse; width: 500px; text-align: center; font-size: 20px; } <table class="table"> <tr> <th>First_Name</th> <th>Last_Name</th> <th>Subject</th> <th>Marks</th> </tr> <tr> <td>James</td><td>Gosling</td><td>Maths</td><td>92</td> </tr> <tr> <td>Alan</td><td>Rickman</td><td>Maths</td><td>89</td> </tr> <tr> <td>Sam</td><td>Mendes</td><td>Maths</td><td>82</td> </tr> </table> 
Išbandykite dabar

Išvestis

Kaip centruoti lentelę CSS?