Bildetekst-side - CSS-triks

Anonim

Den caption-sideeiendom i CSS lar deg definere hvor du skal plassere HTML er

element, brukt på HTML-tabeller. Denne egenskapen kan også gjelde ethvert element hvis displayeiendom er satt til caption-side.

table ( caption-side: top; )

Verdier

  • top: Standaren. Plasser bildeteksten øverst på bordet.
  • bottom: plasserer bildeteksten nederst på tabellen.
  • inherit: indikerer at verdien er arvet fra caption-sideverdien til foreldrene

Den caption-sideegenskapen kan brukes enten til


element or the

display table-caption text-align

Merk at verdiene ovenfor caption-sideer relativt til tabellens skrivemodus. For eksempel, hvis et bord er satt til en vertikal skrivemodus, da den topog bottomverdiene vil være i forhold til retningen av bordet.

Demoen nedenfor inkluderer en "veksle" -knapp som veksler mellom tabellens caption-sideeiendom mellom topog bottom, slik at du kan se forskjellen ved å bruke en tabell med mange datarader:

Se pennedemonstrasjonen
av bildetekstsiden av CSS-Tricks (@ css-tricks)
på CodePen.

I neste demo er writing-modefor bordet satt til vertical-rl. Som demonstrert ved veksling med knappen, topog bottomverdier står i forhold til bordet diktning-modus:

Se
pennedemonstrasjonen av bildetekstsiden med annen skrivemodus av CSS-Tricks (@ css-tricks)
på CodePen.

Ikke-standardverdier bare for Firefox

Firefox har lenge støttet, og støtter fortsatt, fire ikke-standardverdier for caption-side:

  • left: plasserer bildeteksten til venstre for bordet.
  • right: plasserer bildeteksten til høyre for bordet.
  • top-outside: plasserer bildeteksten øverst på bordet, med dimensjoner uavhengig av bordet
  • bottom-outside: plasserer bildeteksten nederst på bordet, med dimensjoner uavhengig av bordet

Demoen nedenfor fungerer bare i Firefox, og lar deg bruke fire knapper for å stille inn de forskjellige ikke-standardverdiene:

Se den bare
Firefox-demonstrasjonen av bildetekstsiden av CSS-Tricks (@ css-tricks)
på CodePen.

Nye standardverdier

I de siste utkast av CSS-spesifikasjonen, den caption-sideeiendommen er en del av CSS Logical Properties nivå 1 og omfatter verdier block-start, block-end, inline-start, og inline-end. De to sistnevnte tilsvarer ikke-standard leftog rightverdier, og kreves bare å være støttet av brukeragenter som støtter disse ikke-standardverdiene.

Mer informasjon

  • billedtekstside i CSS2.1 spesifikasjon
  • billedtekstside i CSS2.2 spesifikasjon
  • bildetekst-side i CSS logiske egenskaper 1

Nettleserstøtte

element, med samme effekt. Selv om denne egenskapen vil påvirke posisjonen til tekstboksen som helhet (en billedteksts verdi beregnes til), vil det ikke påvirke justeringen av teksten i boksen. Tekst i boksen kan justeres ved hjelp av egenskapen.
Chrome Safari Firefox Opera DVS Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Støtte i tabellen over refererer til grunnleggende støtte for standarden topog bottomverdiene. Firefox også støtter også det ikke-standard left, right, top-outsideog bottom-outsideverdier. Det er ingen nettleser støtte for de nye block-start, block-end, inline-start, og inline-endverdier.