Jadvaldagi hujayralardagi markaziy matn

Agar siz yangi boshlang'ich veb-dizayner bo'lsangiz, matnli xontaxtadagi matnni qanday markazlashtirish haqida savollaringiz bo'lishi mumkin. Ushbu qo'llanmada bir necha daqiqadan so'ng ushbu texnikani qo'llang. Bu oson emas - hatto ilgari hech qachon harakat qilmagan bo'lsangiz ham.

Ishni boshlash

Hujayra ichidagi matnni veb-sahifangizdagi boshqa elementdagi matnni markazlashtirganingiz kabi, eng yaxshi CSS bilan amalga oshiriladi. Biroq, avval siz markazlashtirmoqchi bo'lgan narsalarni tanlashingiz kerak. Jadvalda sizda bir nechta variant mavjud: stoldagi har bir kamera; stolning har bir ustunli xonasi stol usti, stol tanasi yoki stol oyog'idagi har bir xonada. Bundan tashqari, jadvaldagi muayyan hujayrani yoki hujayra majmuasini markazlashtirishi mumkin.

Bunga qo'shimcha ravishda, hujjatning boshida ichki uslublar varag'i yoki tashqi uslublar sahifasi sifatida hujjatga biriktirilgan bo'lishi kerak. Uslublar jadvalini ushbu stil sahifasida markazlashtirish uchun joylashtirasiz.

Jadvaldagi har bir hujayraning markazi

Uslub sahifasiga quyidagi satrlarni qo'shing:

td, th {matn-align: center; }

Jadvaldagi har bir ustunli xonani markazlashtirish

Uslub sahifasiga quyidagi satrlarni qo'shing:

th {text-align: center; }

Jadval boshi, tanasi yoki oyoqdagi har bir hujayraning markazlashtirilishi

Ushbu hujayralarni markazlashtirish uchun har doim ishlatilmaydigan jadval teglarini kiritish kerak, masalan, , va . So'ngra, stol usti, tanasi va oyog'ini aniqlash uchun stol hujayralarini bu teglar bilan o'rab olasiz. Shundan so'ng, siz uslub sahifasiga quyidagilarni qo'shasiz:

td {text-align: center; } tbody th, tny td {matnli-align: center; } tfoot th, tfoot td {text-align: center; }

Markazlashtirilmagan joylar uchun uslublarni olib tashlang.

Jadvalda o'ziga xos hujayra yoki hujayrani qanday markazlash mumkin

Buni amalga oshirish uchun siz markazlashtirilgan xujayralar sinfini belgilashingiz kerak.

Markazlashtirmoqchi bo'lgan jadval hujayralariga quyidagi xususiyatni qo'shing:

class = "markazlashtirilgan hujayra" >

Keyin stil sahifangizga quyidagilarni qo'shing:

.centered-cell {text-align: center; }

Siz ushbu jadvalni jadvalingizdagi har qanday xonaga qo'shishingiz mumkin.

O'rash

Ushbu jihozlardan stol hujayralaringizdan foydalanishga ikkilanmang. Ularni birlashtirilgan xujayralar yoki bitta hujayradan foydalanishingiz mumkin va ichidagi matn markazlashtiriladi.