Ob strani z napisi - CSS-triki

Anonim

caption-sideHotel v CSS vam omogoča, da določite, kje postaviti HTML je

element, ki se uporablja v tabelah HTML. Ta lastnost se lahko nanaša tudi na kateri koli element, katerega displaylastnost je nastavljena na caption-side.

table ( caption-side: top; )

Vrednote

  • top: privzeto. Postavitev napisa na vrh tabele.
  • bottom: postavite napis na dno tabele.
  • inherit: označuje, da je vrednost podedovana od caption-sidevrednosti nadrejenega elementa

caption-sidePremoženje se lahko uporablja bodisi na


element or the

display table-caption text-align

Upoštevajte, da so zgornje vrednosti za caption-siderelativno glede na način pisanja v tabelo. Če je tabela na primer nastavljena na način navpičnega pisanja, bodo vrednosti topin bottomsorazmerne smeri tabele.

Spodnja predstavitev vključuje gumb za preklop, ki preklaplja caption-sidelastnosti tabele med topin bottom, tako da lahko vidite razliko v tabeli z veliko vrsticami podatkov:

Oglejte si predstavitev Pen
o lastnostih strani na strani avtorja CSS-Tricks (@ css-tricks)
na CodePen.

V naslednji predstavitvi je writing-modeza tabelo nastavljeno na vertical-rl. Kot je prikazano s preklapljanjem z gumbom, sta vrednosti topin in bottomglede na način pisanja v tabelo:

Oglejte si predstavitev pisala
lastnosti strani z napisi z drugačnim načinom pisanja s strani CSS-Tricks (@ css-tricks)
na CodePen.

Nestandardne vrednosti samo za Firefox

Firefox že dolgo podpira in še vedno podpira štiri nestandardne vrednosti za caption-side:

  • left: postavi napis na levo od tabele.
  • right: postavi napis na desno od tabele.
  • top-outside: postavite napis na vrh tabele, pri čemer so njegove mere neodvisne od tabele
  • bottom-outside: postavite napis na dno tabele, pri čemer so njegove mere neodvisne od tabele

Spodnja predstavitev deluje samo v Firefoxu in vam omogoča, da s štirimi gumbi nastavite različne nestandardne vrednosti:

Oglejte si predstavitev Pen
Firefox-a za lastnost strani z napisi s strani CSS-Tricks (@ css-tricks)
na CodePen.

Nove standardne vrednosti

V zadnjih osnutkov specifikacije CSS je caption-sidelastnost je del CSS Logična Properties 1. stopnji in vključuje vrednote block-start, block-end, inline-start, in inline-end. Slednja dva ustrezati nestandardnih leftin rightvrednostmi, in so potrebne le da podpira uporabniških agentov, ki podpirajo te nestandardnih vrednosti.

Več informacij

  • lastnost strani za napis v specifikaciji CSS2.1
  • lastnost strani za napis v specifikaciji CSS2.2
  • podnapisi v logičnih lastnostih CSS 1

Podpora za brskalnik

element z enakim učinkom. Čeprav bo ta lastnost vplivala na položaj polja z napisi kot celote (vrednost napisa se izračuna na), ne bo vplivala na poravnavo besedila znotraj polja. Besedilo v polju je lahko poravnano z uporabo lastnosti.
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9,2+ 8+ 2.1+ 3,2+

Podpora v zgornji tabeli se nanaša na osnovno podporo za standard topin bottomvrednosti. Firefox tudi dodatno podpira nestandardnih left, right, top-outsidein bottom-outsidevrednosti. Ni brskalnik podpora za nove block-start, block-end, inline-start, in inline-endvrednot.