vertical-align (Polski)

Values

Dla każdej z poniższych wartości zastosujemy ją do obrazu w wierszu wewnątrz pola wiersza elementu listy. Pole liniowe na każdym obrazie ma przerywaną szarą ramkę. Linia używana do wyrównania obrazów dla każdej wartości jest czerwona.

baseline To jest wartość domyślna. Dopasowuje linię bazową elementu do linii bazowej pola liniowego. Jeśli element nie ma linii bazowej, wyrównuje dolną krawędź marginesu z linią bazową wiersza.

Obraz wyrównany do linii bazowej pola wiersza, znajdujący się obok tekstu w wierszu. To jest domyślne wyrównanie w pionie.

środek Wyrównuje pionowy punkt środkowy elementu z linią bazową linii plus połowę wysokości x linii (określonej przez font).

Pionowy środek obrazu jest wyrównany z linią stanowiącą połowę x- wysokość linii powyżej linii bazowej.

Jest to jedna z najczęściej używanych wartości dla vertical-align i jest zwykle używany do wyrównywania ikon i list znaczników z tekstem w wierszu.

sub Obniża linię bazową elementu do właściwej pozycji dla indeksów w wierszu. (Ta wartość nie ma wpływu na rozmiar czcionki w tekście elementu.)

Dolna krawędź obrazu jest obniżona, tak aby była wyrównana z linią bazową indeksu dolnego.

super Podnosi linię bazową elementu do właściwej pozycji dla indeksów górnych w wierszu. (Ta wartość nie ma wpływu na rozmiar czcionki tekstu elementu.)

Dolna krawędź obrazu jest podnoszony, tak że jest wyrównany z linią bazową indeksu górnego.

text-top Wyrównuje górę elementu z górną częścią obszaru zawartości wiersza. Wysokość obszaru zawartości jest wystarczająco wysoka dla maksymalnych górnych i dolnych wysokości wszystkich czcionek w wierszu, a linia wyrównania jest górą tej wysokości. W zależności od podstawowego wyrównania czcionek wysokość może być większa niż którykolwiek z rozmiarów czcionki.

Obraz jest wyrównany z linią tuż nad górnymi krawędziami czcionki. Jeśli użyta jest więcej niż jedna czcionka, ta linia będzie znajdować się tuż nad najwyższą ze wszystkich czcionek wznoszącą.

text-bottom Wyrównuje dół elementu do dołu obszaru zawartości wiersza. Wysokość obszaru zawartości jest wystarczająco duża dla maksymalnych dolnych i górnych krawędzi wszystkich czcionek w wierszu, a linia wyrównania jest dolną częścią tej wysokości. W zależności od podstawowego wyrównania czcionek wysokość może być większa niż którykolwiek z rozmiarów czcionki.

Obraz jest wyrównany z linią tuż poniżej dolnych krawędzi czcionki. Jeśli użyta jest więcej niż jedna czcionka, ta linia będzie znajdować się tuż poniżej najniższego poziomu w dół ze wszystkich czcionek.

top Wyrównuje górę elementu z górną krawędzią cała linia. Oznacza to, że jeśli w linii znajdują się inne elementy o różnej wysokości, na przykład wiele obrazów, górna część wiersza będzie miała wysokość najwyższego z dwóch obrazów.

Obraz wyrównany do górnej krawędzi pola liniowego. Górna część jest określana przez najwyższy element w wierszu, który w tym przypadku jest drugim obrazem.

Jeśli wiersz ma wyraźnie ustawiony element line-height, która jest wyższa niż najwyższa zawartość w wierszu, górna część pola wiersza zostanie określona na podstawie tej wysokości.

Obraz wyrównany do góry pola wiersza z wyraźną linią- podana wysokość jest większa niż wysokość całej zawartości.

bottom

Obraz jest wyrównany do dołu pola liniowego. Ponieważ nie określono line-height, dolna część pola wiersza jest określana przez najniższe malejące liczby czcionki w tym przykładzie, więc wynik wygląda podobnie do tego, jaki otrzymaliśmy przy użyciu text-bottom.

Wyrównuje element do dołu całej linii.

Jeśli linia ma jawnie ustawiony line-height niższa niż najniższa zawartość w wierszu, dolna część pola wiersza zostanie określona na podstawie tej wysokości.

Obraz jest wyrównany do dołu całego pola liniowego. Linia ma określony line-height, który rozciąga dół linii w dół, a obraz jest wyrównany do tego dołu.

< procent > Podnieś element powyżej linii bazowej (jeśli wartość procentowa jest dodatnia) lub obniż element poniżej podstawę (jeśli wartość procentowa jest ujemna) o określoną kwotę. Podana kwota jest procentem wartościline-height. Wartość0%oznacza to samo cobaseline.

Obraz jest wyrównany przy użyciu wartości 50%. Określona line-height ma 100 pikseli, więc obraz jest podniesiony o 50 pikseli powyżej linii bazowej.

< length > Podnieś element powyżej linii bazowej (jeśli wartość długości jest dodatnia) lub obniż element poniżej linii bazowej (jeśli wartość długości jest ujemna) o określoną kwotę. Wartość „0” oznacza to samo cobaseline.

Obraz jest podnoszony z linii bazowej o określoną wartość.

Uwagi

Wartości top, bottom i middle zachowują się zgodnie z oczekiwaniami po zastosowaniu do elementów komórek tabeli. Jednak inne wartości mogą mieć nieoczekiwane zachowanie w niektórych przeglądarkach. Chris Coyier mówi to najlepiej:

Podczas korzystania z wyrównania w pionie na komórkach tabeli najlepszym rozwiązaniem jest trzymanie się góry, dołu i środka. Żadna z pozostałych wartości i tak nie ma większego sensu i daje nieprzewidywalne wyniki w różnych przeglądarkach. Na przykład ustawienie komórki na tekst do dołu wyrównuje tekst do dołu w IE 6 i do góry w Safari 4. Ustawienie jej na sub powoduje wyrównanie do środka w IE 6 i do góry w Safari 4.

Domyślne wyrównanie w pionie komórek tabeli (<td>) to middle. Jednak domyślne wyrównanie w pionie dla elementu na poziomie bloku, który ma display: table-cell, to nadal top, co jest domyślnym wyrównaniem na poziomie bloku pojemniki ogólnie. Zobacz sekcję demonstracyjną poniżej, aby zobaczyć przykład na żywo.

Write a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *