ZALOGUJ SIĘ
login:
hasło:
przypomnij hasło
załóż konto użytkownika
(i zobacz kilka porad gratis)
   
WYSZUKIWARKA I DZIAŁY
całe porady  tytuły
zaznacz działy do przeszukania
(brak wyboru = wszystkie działy)
PHP
MySQL >
PostgreSQL
SQLite
Perl
Java
XML
XSLT
XPath
SVG
RegExp
Wyszukiwarki
Ochrona
VBScript
XHTML/CSS
JavaScript
Grafika
Flash
Photoshop
Windows
Linux
Bash
Apache
Procmail
E-biznes
Explorer
Firefox
Inne porady
   
KURSY, DOKUMENTACJE
Własne:
XHTML/CSS
JavaScript
ActionScript
WML, RSS, SSI
Pozostałe:
PHP
MySQL
Java API
więcej...
   

Kurs XHTML: 1.1, 1.0 / HTML: 4.01, 4.0, 3.2, 3.0, 2.0 / CSS: 2.1, 2.0, 1.0 z przykładami

[Start][Elementy XHTML/HTML][Atrybuty XHTML/HTML][Style CSS]
[0] [A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]

vertical-align

OPIS

Styl definiuje wyrównanie w pionie.

WARTOŚCI

baseline - CSS: 2.1, 2.0, 1.0
wyrównanie do lini bazowej, wartość domyślna
sub - CSS: 2.1, 2.0, 1.0
indeks dolny
super - CSS: 2.1, 2.0, 1.0
indeks górny
top - CSS: 2.1, 2.0, 1.0
wyrównanie do górnej części elementów
text-top - CSS: 2.1, 2.0, 1.0
wyrównanie do górnej lini tekstu
text-bottom - CSS: 2.1, 2.0, 1.0
wyrównanie do dolnej lini tekstu
middle - CSS: 2.1, 2.0, 1.0
wyrównanie do środkowej części elementów
bottom - CSS: 2.1, 2.0, 1.0
wyrównanie do dolej części elementów
procenty - CSS: 2.1, 2.0, 1.0
wartość wyrażona w procentach - dodatnie przesuwają element w górę, ujemne w dół
długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS: 2.1, 2.0
wartość dodatnia (ponad linię bazową) lub ujemna (poniżej lini bazowej)
inherit - CSS: 2.1, 2.0
przejęcie wartości "rodzica", np. vertical-align: inherit;

POZOSTAŁE CECHY

CSS: 2.1, 2.0, 1.0
dziedziczony: nie
odpowiedniki HTML: align, valign

PRZYKŁADY ZASTOSOWAŃ

Przykład 1:

Przykładowy tekst, gdzie 
<span style="vertical-align: super;">
część wyrazów obejmuje </span> wartość "super"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "super"

Przykład 2:

Przykładowy tekst, gdzie 
<span style="vertical-align: sub;">
część wyrazów obejmuje </span> wartość "sub"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "sub"

Przykład 3:

Przykładowy tekst, gdzie 
<span style="vertical-align: text-top;">
część wyrazów obejmuje </span> wartość "text-top"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "text-top"

Przykład 4:

Przykładowy tekst, gdzie 
<span style="vertical-align: text-bottom;">
część wyrazów obejmuje </span> wartość "text-bottom"

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "text-bottom"

Przykład 5:

Przykładowy tekst, gdzie jest nieco liniejek
<img src="g/tlo.gif" width="50" height="50" alt="" 
style="vertical-align: top;" /> 
zawierających grafikę 
<img src="g/tlo.gif" width="50" height="50" alt=""  /> 
aby lepiej przedstawić efekt wyrównywania.

Przykładowy tekst, gdzie jest nieco liniejek zawierających grafikę aby lepiej przedstawić efekt wyrównywania.

Przykład 6:

Przykładowy tekst, gdzie jest nieco liniejek
<img src="g/tlo.gif" width="50" height="50" alt="" 
style="vertical-align: bottom;" /> 
zawierających grafikę 
<img src="g/tlo.gif" width="50" height="50" alt=""  /> 
aby lepiej przedstawić efekt wyrównywania.

Przykładowy tekst, gdzie jest nieco liniejek zawierających grafikę aby lepiej przedstawić efekt wyrównywania.

Przykład 7:

Przykładowy tekst, gdzie jest nieco liniejek
<img src="g/tlo.gif" width="50" height="50" alt="" 
style="vertical-align: middle;" /> 
zawierających grafikę 
<img src="g/tlo.gif" width="50" height="50" alt=""  /> 
aby lepiej przedstawić efekt wyrównywania.

Przykładowy tekst, gdzie jest nieco liniejek zawierających grafikę aby lepiej przedstawić efekt wyrównywania.

Przykład 8:

Tekst z grafiką 
<img src="g/tlo.gif" width="50" height="50" alt="" 
style="vertical-align: -70%;" /> 
obrazujący użycie procentów

Tekst z grafiką obrazujący użycie procentów

Przykład 9:

Tekst z grafiką 
<img src="g/tlo.gif" width="50" height="50" alt="" 
style="vertical-align: 70%;" /> 
obrazujący użycie procentów

Tekst z grafiką obrazujący użycie procentów

Przykład 10:

<style type="text/css"><!--
img { vertical-align: bottom; }
sub { vertical-align: sub; }
p.top { vertical-align: top; }
p.gora { vertical-align: 200%; }
--></style>
 
  © 1996-2024 o serwisieabonamentwarunki korzystaniaCookieskontaktBlog Mapa-Nieruchomosci-Warszawa.pl