blob: 8e34977446b0f634dfaec62c74a7a94e555fb983 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
---
title: vertical-align
slug: Web/CSS/vertical-align
tags:
- CSS
- 'CSS:Dokumentacje'
- Dokumentacje
- Wszystkie_kategorie
translation_of: Web/CSS/vertical-align
---
<p> {{ CSSRef() }}
</p>
<h3 id="Podsumowanie" name="Podsumowanie"> Podsumowanie </h3>
<p>Własność <code>vertical-align</code> określa wyrównanie pionowe elementów <i>inline</i> lub komórek tabeli.
</p>
<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("baseline") }}
</li><li> Stosowana do: elementy <i>inline</i> i komórki tabeli
</li><li> {{ Xref_cssinherited() }}: nie
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}:
</li></ul>
<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia"> Składnia </h3>
<p><code>vertical-align:</code> <code>baseline</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code> | <code>middle</code> | <code>top</code> | <code>bottom</code> | <percentage> | <a href="pl/CSS/length"><length></a> | {{ Cssxref("inherit") }}
</p>
<h3 id="Warto.C5.9Bci_.28dla_element.C3.B3w_inline.29" name="Warto.C5.9Bci_.28dla_element.C3.B3w_inline.29"> Wartości (dla elementów inline) </h3>
<p>Większość wartości wyrównuje element w pionie w stosunku do jego rodzica:
</p>
<dl><dt>baseline </dt><dd>Wyrównuje linię bazową elementu z linią bazową jego rodzica.
</dd><dt>sub </dt><dd>Wyrównuje linię bazową elementu z linią bazową indeksu dolnego jego rodzica.
</dd><dt>super </dt><dd>Wyrównuje linię bazową elementu z linią bazową indeksu górnego jego rodzica.
</dd><dt>text-top </dt><dd>Wyrównuje górę elementu z górą czcionki elementu rodzica.
</dd><dt>text-bottom </dt><dd>Wyrównuje dół elementu z dołem czcionki elementu rodzica.
</dd><dt>middle </dt><dd>Wyrównuje środek elementu ze środkiem małych liter rodzica.
</dd><dt><a href="pl/CSS/length"><length></a> </dt><dd>Ustawia linię bazową elementu o daną wartość powyżej linii bazowej jego rodzica.
</dd><dt><percentage> </dt><dd>podobnie jak wartość <length> z procentami będącymi procentem własności {{ Cssxref("line-height") }}
</dd></dl>
<p>Dla elementów, które nie mają linii bazowej, używana jest w zamian dolna krawędź marginesu.
</p><p>Natomiast dwie wartości wyrównują element w pionie raczej względem całkowitej linii niż względem jego rodzica:
</p>
<dl><dt>top </dt><dd>Wyrównuje górę elementu i jego potomków z górą całkowitej linii.
</dd><dt>bottom </dt><dd>Wyrównuje dół elementu i jego potomków z dołem całkowitej linii.
</dd></dl>
<p>Wartości ujemne są dozwolone.
</p>
<h3 id="Warto.C5.9Bci_.28dla_kom.C3.B3rek_tabeli.29" name="Warto.C5.9Bci_.28dla_kom.C3.B3rek_tabeli.29"> Wartości (dla komórek tabeli) </h3>
<dl><dt>baseline (oraz sub, super, text-top, text-bottom, <length>, i <percentage>) </dt><dd> Wyrównuje linię bazową komórki z linią bazową wszystkich innych komórek w wierszu, które są wyrównane względem linii bazowej.
</dd><dt>top</dt><dd> Wyrównuje górną krawędź dopełnienia komórki z górą wiersza.
</dd><dt>middle</dt><dd> Centruje obszar dopełnienia komórki względem wiersza.
</dd><dt>bottom</dt><dd> Wyrównuje dolną krawędź dopełnienia komórki z dołem wiersza.
</dd></dl>
<p>Wartości ujemne są dozwolone.
</p>
<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady"> Przykłady </h3>
<pre>img {
vertical-align: bottom;
}
</pre>
<h3 id="Uwagi" name="Uwagi"> Uwagi </h3>
<h3 id="Specyfikacje" name="Specyfikacje"> Specyfikacje </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#vertical-align">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">CSS 2.1</a>
</li></ul>
<h3 id="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85" name="Zgodno.C5.9B.C4.87_z_przegl.C4.85dark.C4.85"> Zgodność z przeglądarką </h3>
<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe"> Zobacz także </h3>
<p>{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }} (<code>auto</code>)
</p>{{ languages( { "en": "en/CSS/vertical-align", "fr": "fr/CSS/vertical-align" } ) }}
|
