Parim viis teksti lahtrisse keskmiseks

Kui olete algaja veebidisainer, võib teil tekkida küsimusi selle kohta, kuidas teksti tabelirakku tsentreerida. Selle juhendi abil õppige seda tehnikat vaid mõne minutiga. See on lihtne - isegi kui te pole seda kunagi varem proovinud.

Alustamine

Tsentreeriv tekst lahtri sisemust saab kõige paremini teha CSS-iga, täpselt nagu keskendaksite oma veebisaidi mõnes teises elemendis teksti. Enne alustamist peate siiski otsustama, mida täpselt soovite keskendada. Tabeli puhul on teil mitu võimalust, sealhulgas kõik tabeli lahtrid; iga tabeli päise lahter iga laua pea, laua keha või jala lahter. Samuti võite tabeli keskele koondada kindla lahtri või lahtrite komplekti.

Lisaks peaksite looma sisemine stiilileht dokumendi peas või on dokumendile lisatud kui väline stiilileht. Panete stiilid selle tabeli lahtrite keskele.

Kuidas tabeli iga lahtrit tsentreerida

Lisage oma stiililehele järgmised read:

td, th {
teksti joondamine: keskel;
}

Kuidas koondada tabeli iga päise lahter

Lisage oma stiililehele järgmised read:

instagram viewer
th {
teksti joondamine: keskel;
}

Iga laua pea, keha või jala raku tsentreerimine

Nende lahtrite tsentreerimiseks peate lisama tabelimärgendid, mida alati ei kasutata, näiteks.

thead th, thead td {
teksti joondamine: keskel;
}
tbody th, tbody td {
teksti joondamine: keskel;
}
tfoot th, tfoot td {
teksti joondamine: keskel;
}

Eemaldage nende alade stiilid, mida te ei soovi, et need oleksid keskel.

Konkreetse lahtri või rakkude tabelisse tsentreerimine

Selleks peate määrama lahtritele klassi, mida soovite keskele panna.

Lisage järgmine atribuut tabelirakkudele, mida soovite keskele panna:

Seejärel lisage oma stiililehele järgmine:

.centered-cell {
teksti joondamine: keskel;
}

Saate selle klassi lisada oma tabeli mis tahes lahtrisse.

Pakkimine

Ärge kartke kasutada neid stiile oma tabeli lahtrites. Saate neid kasutada ühendatud lahtrites või üksikutes lahtrites ja nende sees olev tekst tsentreeritakse.

instagram story viewer