Natpisna strana - CSS-trikovi

Anonim

caption-sideNekretnina u CSS omogućuje definiranje gdje pozicionirati HTML-a

element, koji se koristi na HTML tablicama. Ovo se svojstvo može primijeniti i na bilo koji element čije je displaysvojstvo postavljeno na caption-side.

table ( caption-side: top; )

Vrijednosti

  • top: zadani. Postavio je naslov na vrh tablice.
  • bottom: postavlja naslov na dno tablice.
  • inherit: označava da je vrijednost naslijeđena od caption-sidevrijednosti svog roditelja

caption-sideImovine može se primijeniti bilo na


element or the

display table-caption text-align

Imajte na umu da su gornje vrijednosti za caption-sideu odnosu na način pisanja u tablici. Na primjer, ako je stol postavljen na vertikalne način pisanja, a zatim topi bottomvrijednosti će biti u odnosu na smjer stola.

Demonstracija u nastavku uključuje gumb "prebaci" koji prebacuje caption-sidesvojstvo tablice između topi bottom, tako da razliku možete vidjeti pomoću tablice s mnogo redaka podataka:

Pogledajte
Demonstraciju olovke svojstva na strani opisa tvrtke CSS-Tricks (@ css-tricks)
na CodePenu.

U sljedećem pokaznom prikazu postavljeno je writing-modeza tablicu vertical-rl. Kao što pokazuje varijantama pomoću tipke, topa bottomvrijednosti su u odnosu na tablice pisaći način:

Pogledajte
demo olovke svojstva na strani opisa s različitim načinom pisanja od strane CSS-trikova (@ css-trikovi)
na CodePenu.

Nestandardne vrijednosti samo za Firefox

Firefox već dugo podržava i još uvijek podržava četiri nestandardne vrijednosti za caption-side:

  • left: postavlja naslov lijevo od tablice.
  • right: postavlja naslov s desne strane tablice.
  • top-outside: postavlja naslov na vrh tablice, a dimenzije su neovisne o tablici
  • bottom-outside: postavlja naslov na dno tablice, a njegove dimenzije neovisne su o tablici

Demonstracija u nastavku radi samo u Firefoxu i omogućuje vam upotrebu četiri gumba za postavljanje različitih nestandardnih vrijednosti:

Pogledajte
demo Pen -Firefox-a samo svojstva na strani opisa tvrtke CSS-Tricks (@ css-tricks)
na CodePen-u.

Nove standardne vrijednosti

U najnovijim nacrtima CSS specifikacije, caption-sidevlasništvo je dio CSS Logički Properties Level 1 i uključuje vrijednosti block-start, block-end, inline-start, i inline-end. Potonje dvije odgovarati nestandardne lefti rightvrijednosti, te se samo moraju biti podržan od strane korisnika sredstava koja podržavaju one nestandardne vrijednosti.

Više informacija

  • svojstvo na strani opisa u specifikaciji CSS2.1
  • svojstvo na strani opisa u CSS2.2 spec
  • naslov u CSS logičkim svojstvima 1

Podrška preglednika

element, s istim učinkom. Iako će ovo svojstvo utjecati na položaj okvira s naslovima u cjelini (vrijednost naslova izračunava se na), to neće utjecati na poravnanje teksta unutar okvira. Tekst unutar okvira može se poravnati pomoću svojstva.
Krom Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 9,2+ 8+ 2.1+ 3,2+

Podrška u gornjoj tablici odnosi se na osnovnu podršku za standard topi bottomvrijednosti. Vatra je također dodatno podržava nestandardne left, right, top-outsidei bottom-outsidevrijednosti. Nema preglednik podrška za nove block-start, block-end, inline-starti inline-endvrijednosti.