Kuvateksti-puoli - CSS-temppuja

caption-sideOmaisuus CSS voit määritellä mihin asentoon HTML: n

elementti, jota käytetään HTML-taulukoissa. Tämä ominaisuus voi koskea myös mitä tahansa elementtiä, jonka displayominaisuudeksi on määritetty caption-side.

table ( caption-side: top; )

Arvot

• top: oletusarvo. Sijoittaa tekstityksen taulukon yläosaan.
• bottom: sijoittaa tekstityksen taulukon alaosaan.
• inherit: osoittaa, että arvo on peritty caption-sidevanhemman arvosta

caption-sideOminaisuus voidaan soveltaa joko


element or the

display table-caption text-align

Huomaa, että yllä olevat arvot caption-sideovat suhteessa taulukon kirjoitustilaan. Jos esimerkiksi taulukko on asetettu pystysuoraan kirjoitustilaan, topja bottom-arvot ovat suhteessa taulukon suuntaan.

Demo Alla sisältää ”toggle” -painiketta että vaihtaa pöydän caption-sideomaisuus jaetaan topja bottom, joten näet eron käyttäen taulukon monia tietorivejä:

Katso
CSS-Tricks (@ css-tricks)
-koodiesitys tekstityspuolen ominaisuudesta CodePenissä.

Seuraavassa esittelyssä writing-modetaulukon a-arvo on vertical-rl. Kuten vaihtaminen painikkeella osoittaa, topja bottom-arvot ovat suhteessa taulukon kirjoitusmoodiin:

Katso
CSS-Tricks (@ css-tricks)
CSP-Tricksin (@ css-tricks) kuvateksti-ominaisuuden kynäesittely eri kirjoitustilassa .

Epätyypilliset vain Firefox-arvot

Firefox on pitkään tukenut ja tukee edelleen neljää epätyypillistä arvoa seuraaville caption-side:

• left: sijoittaa tekstityksen taulukon vasemmalle puolelle.
• right: sijoittaa tekstityksen taulukon oikealle puolelle.
• top-outside: sijoittaa tekstityksen taulukon yläosaan siten, että sen mitat ovat taulukosta riippumattomat
• bottom-outside: sijoittaa tekstityksen taulukon alaosaan siten, että sen mitat ovat taulukosta riippumattomat

Alla oleva esittely toimii vain Firefoxissa ja antaa sinun käyttää neljää painiketta eri epästandardien arvojen asettamiseen:

Katso
CSS-
Tricksin (@ css-tricks) CSP -Tricks (@ css-tricks) -kynä, joka sisältää vain kynä Firefoxille .

Uudet vakioarvot

Viimeisimmässä luonnokset CSS spesifikaation caption-sideasunto kuuluu CSS Looginen Ominaisuudet Taso 1 ja sisältää arvot block-start, block-end, inline-start, ja inline-end. Kaksi viimeksi mainittua vastaavat ei-standardeja leftja rightarvoja, ja niitä vaaditaan vain sellaisten käyttäjäagenttien tukemana, jotka tukevat näitä epätyypillisiä arvoja.

Lisää tietoa

• caption-side property in CSS2.1 spec
• caption-side property in CSS2.2 spec
• kuvateksti-puoli CSS: n loogisissa ominaisuuksissa 1

Selaimen tuki

elementti, samalla vaikutuksella. Vaikka tämä ominaisuus vaikuttaa tekstityslaatikon sijaintiin kokonaisuudessaan (tekstityksen arvo lasketaan), se ei vaikuta tekstin tasaamiseen laatikon sisällä. Laatikon sisällä oleva teksti voidaan kohdistaa ominaisuuden avulla.

Kromi	Safari	Firefox	Ooppera	IE	Android	iOS
1+	1+	1+	9.2+	8+	2.1+	3.2+

Yllä olevan taulukon tuki viittaa standardin topja bottomarvojen perustukeen. Firefox myös lisäksi tukee epätyypillisten left, right, top-outside, ja bottom-outsidearvot. Ei ole selain tukee uutta block-start, block-end, inline-start, ja inline-endarvot.