Billedtekst-side - CSS-tricks

Anonim

Den caption-sideejendom i CSS giver dig mulighed for at definere, hvor at placere HTML s

element, der bruges i HTML-tabeller. Denne egenskab kan også gælde for ethvert element, hvis displayejendom er indstillet til caption-side.

table ( caption-side: top; )

Værdier

  • top: standard. Placerer billedteksten øverst på bordet.
  • bottom: placerer billedteksten nederst på bordet.
  • inherit: angiver, at værdien arves fra caption-sideværdien af ​​dens overordnede

Den caption-sideegenskab kan anvendes enten til


element or the

display table-caption text-align

Bemærk, at ovenstående værdier for caption-sideer i forhold til tabellens skrivemåde. For eksempel, hvis en tabel er indstillet til en lodret skrivetilstand, derefter topog bottomværdier vil være i forhold til retningen af bordet.

Demoen nedenfor inkluderer en “skift” -knap, der skifter tabelens caption-sideegenskab mellem topog bottom, så du kan se forskellen ved hjælp af en tabel med mange datarækker:

Se pendemo
af egenskab med billedtekst fra CSS-Tricks (@ css-tricks)
på CodePen.

I den næste demo er writing-modefor bordet indstillet til vertical-rl. Som demonstreret ved at skifte ved hjælp af knappen, den topog bottomværdier i forhold til bordet forfatterskab-tilstand:

Se
pendemonstrationen af ​​billedtekstsiden med forskellige skrivemåder af CSS-Tricks (@ css-tricks)
på CodePen.

Ikke-standardværdier, der kun er Firefox

Firefox har længe støttet og understøtter stadig fire ikke-standardværdier til caption-side:

  • left: placerer billedteksten til venstre for bordet.
  • right: placerer billedteksten til højre for bordet.
  • top-outside: placerer billedteksten øverst på bordet med dets dimensioner uafhængige af bordet
  • bottom-outside: placerer billedteksten nederst på bordet med dets dimensioner uafhængige af bordet

Demoen nedenfor fungerer kun i Firefox og giver dig mulighed for at bruge fire knapper til at indstille de forskellige ikke-standardværdier:

Se den
kun Firefox-demo af CSS-Tricks (@ css-tricks)
på CodePen.

Nye standardværdier

I den seneste udkast til CSS specifikation, den caption-sideejendom er en del af CSS Logisk Properties niveau 1 og omfatter værdier block-start, block-end, inline-start, og inline-end. De to sidstnævnte svarer til ikke-standard leftog rightværdier og kræves kun understøttet af brugeragenter, der understøtter disse ikke-standardværdier.

Mere information

  • billedtekst-ejendom i CSS2.1 spec
  • billedtekst-side egenskab i CSS2.2 spec
  • billedtekst-side i CSS logiske egenskaber 1

Browsersupport

element med samme effekt. Selv om denne egenskab vil påvirke billedtekstens position som helhed (en billedteksts værdi beregnes til), vil det ikke påvirke justeringen af ​​tekst inde i feltet. Tekst inde i feltet kan justeres ved hjælp af egenskaben.
Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Support i tabellen ovenfor refererer til grundlæggende support til standarden topog bottomværdierne. Firefox også derudover støtter ikke-standard left, right, top-outsideog bottom-outsideværdier. Der er ingen browser støtte til de nye block-start, block-end, inline-startog inline-endværdier.