Başlık tarafı - CSS Hileleri

Anonim

CSS'deki caption-sideözellik, HTML’lerin nereye yerleştirileceğini tanımlamanıza olanak sağlar

öğesi, HTML tablolarında kullanılır. Bu özellik, displayözelliği olarak ayarlanmış herhangi bir öğe için de geçerli olabilir caption-side.

table ( caption-side: top; )

Değerler

  • top: varsayılan. Başlığı tablonun en üstüne yerleştirir.
  • bottom: resim yazısını tablonun altına yerleştirir.
  • inherit: değerin, caption-sideüst değerin değerinden miras alındığını gösterir

caption-sideÖzelliği için, ya da,


element or the

display table-caption text-align

İçin yukarıdaki değerlerin caption-sidetablonun yazma moduna göre olduğuna dikkat edin. Örneğin, bir tablo dikey yazma moduna ayarlanmışsa, o zaman topve bottomdeğerleri tablonun yönüne göre olacaktır.

Aşağıdaki demo, tablonun caption-sideözelliğini topve arasında değiştiren bir "geçiş" düğmesi içerir bottom, böylece birçok veri satırı içeren bir tablo kullanarak farkı görebilirsiniz:

CodePen'de
CSS-Tricks (@ css-tricks) tarafından yazılan başlık tarafı özelliğinin Kalem Demosuna bakın
.

Bir sonraki demoda, writing-modetablo için ayarlanmıştır vertical-rl. Düğmeyi kullanarak geçiş yaparak gösterildiği gibi, topve bottomdeğerleri tablonun yazma moduna bağlıdır:

CodePen'de
CSS-Püf Noktaları (@ css-tricks) tarafından farklı yazma modlu başlık tarafı özelliğinin Kalem Demosuna bakın
.

Standart Olmayan Yalnızca Firefox Değerleri

Firefox, aşağıdakiler için uzun süredir standart olmayan dört değeri destekliyor ve hala destekliyor caption-side:

  • left: başlığı tablonun soluna yerleştirir.
  • right: resim yazısını tablonun sağına yerleştirir.
  • top-outside: başlığı tablodan bağımsız boyutları ile tablonun en üstüne konumlandırır
  • bottom-outside: başlığı tablodan bağımsız boyutları ile tablonun alt kısmına yerleştirir

Aşağıdaki demo yalnızca Firefox'ta çalışır ve farklı standart dışı değerleri ayarlamak için dört düğmeyi kullanmanıza izin verir:

CodePen'de
CSS-Tricks (@ css-tricks) tarafından yapılan altyazı tarafı özelliğinin yalnızca Pen Firefox demosuna
bakın.

Yeni Standart Değerler

CSS şartname son taslaklarda caption-sidemülkiyet CSS Mantıksal Özellikleri Seviye 1 parçasıdır ve değerler içerir block-start, block-end, inline-start, ve inline-end. Son ikisi standart olmayana leftve rightdeğerlere karşılık gelir ve yalnızca standart olmayan değerleri destekleyen kullanıcı aracıları tarafından desteklenmeleri gerekir.

Daha fazla bilgi

  • CSS2.1 spesifikasyonunda başlık tarafı özelliği
  • CSS2.2 spesifikasyonunda başlık tarafı özelliği
  • CSS Mantıksal Özellikleri 1'de başlık tarafı

Tarayıcı Desteği

eleman, aynı etkiye sahip. Bu özellik bir bütün olarak başlık kutusunun konumunu etkilerken (bir resim yazısının değeri hesaplanır), kutu içindeki metnin hizalamasını etkilemez. Kutu içindeki metin, özellik kullanılarak hizalanabilir.
Krom Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Yukarıdaki tablodaki destek, standart topve bottomdeğerler için temel desteği ifade eder . Ateş, aynı zamanda, ilave olarak, standart olmayan destekler left, right, top-outsideve bottom-outsidedeğerleri. Yeni hiçbir tarayıcı desteği yoktur block-start, block-end, inline-start, ve inline-enddeğerler.