ghid de Css

CSS proprietate vertical-align este utilizat pentru alinierea verticală a elementelor în raport cu părinții lor. Practic, o astfel de aliniere se bazează pe linia de bază ca element în sine, și părintele său, astfel încât să înceapă cu o explicație a liniei de bază este.

  1. Baseline - o linie imaginară care trece de-a lungul marginii de jos a personajelor. Unele litere (u, c, y, q, p, f) parțial dincolo de linia de bază.
  2. Dacă elementul are nici o linie de bază (ca, de exemplu, imagini sau elemente ale blocului) acționează apoi în rolul său marginea exterioară a câmpului inferior (marginea de jos).
  3. linie de celule de bază de calcul tabelar - este linia de bază a primei linii de text, sau primul bloc (în funcție de ceea ce este la început). Dacă un astfel de bloc de text sau nu, este partea de jos a celulei.
  4. Număr inițial de HTML-tabel - o bază comună pentru toate celulele din această serie.

tipul de proprietate

Aceasta se aplică: elemente integrate (la nivel de linie), o celulă de masă (. ) Și elemente de afișare cu masa de celule egale.

Valoarea proprietăților verticale-align este o indicație a elementului de aliniere verticală în următoarele moduri.

  • linia de bază - aliniază elementul de bază în raport cu linia de bază a liniei sale mamă.
  • mijloc - aliniază elementul de mijloc vertical de la părinte linia de bază plus jumătate x înălțimea părintelui, unde x înălțime - este înălțimea unui literă mică x. Rețineți că, în acest caz, este nevoie de mijlocul elementului în sine, și nu este posibil sale elemente descendente (care poate fi mai mare), ca x înălțimea părintelui.
  • sub - line pretensionează elementul de bază la nivelul inferior al indicelui containerului părinte, dar mărimea elementului font, astfel, rămâne neschimbat.
  • Super - înclină elementul de bază linia de la nivelul indicelui superior al containerului părinte, dar mărimea elementului font, astfel, rămâne neschimbat.
  • Text-top - nivelare membrul superior pe partea de sus de cel mai înalt punct al simbolului de text părinte. Rețineți că, în acest caz, aliniate exact deasupra elementului în sine, nu în partea de sus a elementelor sale posibile descendente (care poate fi mai mare), precum și în partea de sus a părintelui.
  • text-bottom - element de fund de aliniere cel mai jos punct al caracterelor de text părinte.
  • top - nivelare membrul superior, dar având în vedere potențialul descendenții săi de cel mai înalt punct al elementului de vârf în linie (mai degrabă decât la mamă).
  • partea de jos - elementul de nivelare de jos, dar luând în considerare posibilele sale descendenții la cel mai de jos punct al liniei.
  • Dimensiune - deplasarea pe verticală în raport cu linia de bază părinte membru indicat în termeni relativi sau absoluți luate în CSS, de exemplu, pixeli (px), puncte (pt), centimetri (cm), etc. Când această valoare negativă este deplasată în jos elementul și pozitiv - în sus, adică valoarea 0 este echivalentă cu valoarea inițială.
  • Procent - membru deplasare verticală în raport cu linia de bază părinte, procentul (%), în cazul în care 100% este luată pentru linia de înălțimea elementului în sine, nu mamă. Când această valoare negativă este deplasată în jos elementul și pozitiv - în sus, adică valoarea de 0% este echivalent cu valoarea inițială.
  • moștenesc - moștenesc verticală alinia valoarea elementului mamă.

Cu toate acestea, pentru celulele de tabel pot fi utilizate o gamă limitată de valori verticale-align. care au următoarele semnificații:

  • linia de bază - aliniază baza liniei de celule cu linia de bază a seriei, în care se află. În cazul în care celula este combinat și constă din mai multe rânduri, apoi luate linia de bază a primului rând.
  • sus - în partea de sus a continutului celulei este aliniat în raport cu partea sa superioară.
  • mijloc - centrul continutului celulei este aliniat în raport cu centrul său.
  • de jos - în partea de jos a conținutului celulei este aliniat în raport cu partea sa inferioară.

intrare Interes: linie de înălțime în raport cu elementul în sine.

Valoare implicită: valoarea inițială.

Deși specificațiile CSS pe aceasta și nu spun, dar browserele implicite aliniază conținutul celulelor în conformitate cu verticala-se alinieze cu o valoare de mijloc, care este, caietul de sarcini HTML.

vertical-align: linia de bază | Orientul Mijlociu | Sub | super-| text-top | text-bottom | top | jos | mărime | interes | moșteni

Exemplu CSS: utilizați vertical-align

Rezultat. Folosind proprietățile CSS vertical-align în browser-ul Opera.