Vertical-align: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) (Skapade sidan med 'Anger hur ett element av typen <code>inline</code> eller <code>table-cell</code> ska placeras vertikalt i relation till dess föräldraelement. == Egenskaper == {| class="wik...') |
PGJ (diskussion | bidrag) |
||
| (3 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 19: | Rad 19: | ||
|} | |} | ||
I alla fall gäller att om föräldraelementet skulle sakna en baslinje, används nedre kanten på föräldraelementets bottenmarginal. | |||
<code> | ''höjdvärde'' förflyttar elementet så långt ifrån föräldraelementets baslinje. Värdet kan anges med hjälp av alla [[Måttenheter_i_CSS|CSS-måttenheter]]. Eventuell procent räknas ifrån föräldraelementets <code>line-height</code>. | ||
<code> | <code>baseline</code> lägg elements baslinje i kant med föräldraelementets baslinje. | ||
<code> | <code>sub</code> lägg elements baslinje i kant med den baslinje som gäller föräldraelementet nedsänkta text. | ||
<code> | <code>super</code> lägg elements baslinje i kant med den baslinje som gäller föräldraelementet upphöjda text. | ||
<code> | <code>text-top</code> lägg elements toppkant i kant med toppen på föräldraelementets teckensnitt. | ||
<code> | <code>text-bottom</code> lägg elements bottenkant i kant med botten på föräldraelementets teckensnitt. | ||
<code>bottom</code> | <code>middle</code> lägg elements baslinje i kant med föräldraelementets baslinje plus halva dess <code>x</code>-höjd. | ||
<code>top</code> justerar så toppen av elementet läggs mot föräldraelementets topp. | |||
<code>bottom</code> justerar så botten av elementet läggs mot föräldraelementets botten. | |||
== Exempel == | == Exempel == | ||
<codepen pen="LpPyaY" height=" | <codepen pen="LpPyaY" height="800" tab="css,result"> | ||
</codepen> | </codepen> | ||
== Egenskapens definition == | == Egenskapens definition == | ||
http:// | http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align | ||
Nuvarande version från 13 januari 2019 kl. 22.04
Anger hur ett element av typen inline eller table-cell ska placeras vertikalt i relation till dess föräldraelement.
Egenskaper
| Parametrar | <höjdvärde> | baseline | sub | super | text-top | text-bottom | middle | top | bottom
|
| Defaultvärde | baseline
|
| Ärvs? | Ja |
| Animerbart? | Ja |
| Fungerar med... | inline- eller table-cell-element.
|
I alla fall gäller att om föräldraelementet skulle sakna en baslinje, används nedre kanten på föräldraelementets bottenmarginal.
höjdvärde förflyttar elementet så långt ifrån föräldraelementets baslinje. Värdet kan anges med hjälp av alla CSS-måttenheter. Eventuell procent räknas ifrån föräldraelementets line-height.
baseline lägg elements baslinje i kant med föräldraelementets baslinje.
sub lägg elements baslinje i kant med den baslinje som gäller föräldraelementet nedsänkta text.
super lägg elements baslinje i kant med den baslinje som gäller föräldraelementet upphöjda text.
text-top lägg elements toppkant i kant med toppen på föräldraelementets teckensnitt.
text-bottom lägg elements bottenkant i kant med botten på föräldraelementets teckensnitt.
middle lägg elements baslinje i kant med föräldraelementets baslinje plus halva dess x-höjd.
top justerar så toppen av elementet läggs mot föräldraelementets topp.
bottom justerar så botten av elementet läggs mot föräldraelementets botten.
Exempel
Egenskapens definition
http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align