Tablo Hücresinde Metni Ortalamanın En İyi Yolu

Acemi bir Web tasarımcısıysanız, metni bir tablo hücresinin içinde nasıl ortalayacağınızla ilgili sorularınız olabilir. Bu kılavuzla, bu tekniği sadece birkaç dakika içinde öğrenin. Kolay - daha önce hiç denememiş olsanız bile.

Başlarken

ortalama metin Bir hücrenin içi, en iyi şekilde CSS ile yapılır, tıpkı metni Web sayfanızdaki başka bir öğede ortalamanız gibi. Ancak başlamadan önce, tam olarak neyi merkezlemek istediğinize karar vermelisiniz. Bir tabloyla, tablodaki her hücre dahil olmak üzere birkaç seçeneğiniz vardır; tablodaki her başlık hücresi masa başlığındaki, masa gövdesindeki veya masa ayağındaki her hücre. Ayrıca tablo içinde belirli bir hücreyi veya hücre grubunu ortalayabilirsiniz.

Ek olarak, bir oluşturmalısınız iç stil sayfası belgenizin başında veya belgeye ek olarak harici stil sayfası. Bu stil sayfasında tablo hücrelerinizi ortalamak için stilleri koyacaksınız.

Tablodaki Her Hücre Nasıl Ortalanır

Stil sayfanıza aşağıdaki satırları ekleyin:

td, th {
metin hizalama: merkez;
}
instagram viewer

Tablodaki Her Başlık Hücresi Nasıl Ortalanır

Stil sayfanıza aşağıdaki satırları ekleyin:

{
metin hizalama: merkez;
}

Masa Başındaki, Gövdesindeki veya Ayaktaki Her Hücreyi Merkezleme

Bu hücreleri ortalamak için her zaman kullanılmayan tablo etiketleri eklemeniz gerekir.

thead th, thead td {
metin hizalama: merkez;
}
tbody th, tbody td {
metin hizalama: merkez;
}
tfoot th, tfoot td {
metin hizalama: merkez;
}

Merkezlenmesini istemediğiniz alanların stillerini kaldırın.

Bir Tabloda Belirli Bir Hücre veya Hücreler Nasıl Ortalanır

Bunu yapmak için, ortalamak istediğiniz hücrelere bir sınıf ayarlamanız gerekir.

Ortalanmasını istediğiniz tablo hücrelerine aşağıdaki özniteliği ekleyin:

Ardından, stil sayfanıza aşağıdakileri ekleyin:

.merkezli hücre {
metin hizalama: merkez;
}

Bu sınıfı tablonuzdaki herhangi bir hücreye ekleyebilirsiniz.

Toplama

Bu stilleri herhangi bir tablo hücrenizde kullanmaktan çekinmeyin. Bunları birleştirilmiş hücrelerde veya tek hücrelerde kullanabilirsiniz ve içindeki metin ortalanır.

instagram story viewer