Страна на надписа - CSS-трикове

Anonim

В caption-sideимота в CSS ви позволява да определите къде да се поставят в HTML

елемент, използван в HTML таблици. Това свойство може да се прилага и за всеки елемент, чието displayсвойство е зададено на caption-side.

table ( caption-side: top; )

Стойности

  • top: по подразбиране. Позиционира надписа в горната част на таблицата.
  • bottom: позиционира надписа в долната част на таблицата.
  • inherit: показва, че стойността се наследява от caption-sideстойността на своя родител

В caption-sideимота може да се прилага както към


element or the

display table-caption text-align

Обърнете внимание, че горните стойности за caption-sideса относителни към режима на запис в таблицата. Например, ако една маса е настроен на режим вертикална писане, а след това topи bottomценности ще бъдат по отношение на посоката на масата.

Демото по-долу включва бутон „превключване“, който превключва caption-sideсвойството на таблицата между topи bottom, така че можете да видите разликата, като използвате таблица с много редове данни:

Вижте
Демонстрацията на писалката на свойството страна на надписа от CSS-Tricks (@ css-tricks)
на CodePen.

В следващата демонстрация, writing-modeза таблицата е настроено на vertical-rl. Както показа превключване с помощта на бутона, topи bottomстойности се отнасят към писане режим на таблицата:

Вижте
Демото на Pen на свойството страна на надписа с различен режим на писане от CSS-Tricks (@ css-tricks)
на CodePen.

Нестандартни стойности само за Firefox

Firefox отдавна поддържа и все още поддържа четири нестандартни стойности за caption-side:

  • left: позиционира надписа отляво на таблицата.
  • right: позиционира надписа отдясно на таблицата.
  • top-outside: позиционира надписа в горната част на таблицата, като размерите й са независими от таблицата
  • bottom-outside: позиционира надписа в долната част на таблицата, като размерите й са независими от таблицата

Демото по-долу работи само във Firefox и ви позволява да използвате четири бутона за задаване на различните нестандартни стойности:

Вижте
демонстрацията на Pen Firefox само за свойството страна на надписа от CSS-Tricks (@ css-tricks)
на CodePen.

Нови стандартни стойности

В най-новите проекти на спецификацията на CSS, за caption-sideИмотът е част от CSS Логически имоти Level 1 и включва ценности block-start, block-end, inline-startи inline-end. Последните две съответстват на нестандартните leftи rightстойности и се изискват само да се поддържат от потребителски агенти, които поддържат тези нестандартни стойности.

Повече информация

  • свойство на надписа в CSS2.1 спецификация
  • свойство на надписа в CSS2.2 спецификация
  • надпис в логическите свойства на CSS 1

Поддръжка на браузър

елемент, със същия ефект. Въпреки че това свойство ще повлияе на позицията на полето с надписи като цяло (стойността на надписа се изчислява), това няма да повлияе на подравняването на текста вътре в полето. Текстът в полето може да бъде подравнен с помощта на свойството.
Chrome Сафари Firefox Опера IE Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Поддръжката в горната таблица се отнася до основна поддръжка за стандарта topи bottomстойностите. Firefox също допълнително подкрепя нестандартен left, right, top-outside, както и bottom-outsideценности. Няма поддръжка на браузъра за новите block-start, block-end, inline-start, както и inline-endценности.