Cum să poziționați elementele web cu aliniere verticală CSS

Cautare Google









Decor
Descriere






pădure

Lorem ipsum dolor sit amet.






Ocean

Lorem ipsum dolor sit amet.

The cod HTML de mai sus creează o pagină web simplă care afișează patru elemente: text legat, o imagine, un videoclip încorporat și un tabel. Ar trebui să arate așa în browserul tău:

Cum să aliniați textul pe verticală

În mod implicit, majoritatea elementelor de text (cum ar fi titluri,

, și

Cu toate acestea, unele elemente de text, cum ar fi și etichetele sunt în linie. Ca rezultat, ele suportă proprietatea de aliniere verticală. Pentru a alinia vertical textul, pur și simplu atribuiți valoarea corespunzătoare proprietății de aliniere verticală CSS.

Utilizarea valorii de sus pe text cu aliniere verticală

A {
 vertical-align: top;
}

Adăugând Cod CSS de mai sus la documentul HTML de bază va alinia partea de sus a etichetați textul cu partea de sus a celui mai înalt element din linie. Producerea următoarei afișaje actualizate:

Utilizarea valorii procentuale pe text

A {
 vertical-align: -50%;
}

CSS-ul de mai sus aliniază elementul text la o poziție care este cu 50% sub linia de bază a elementului părinte. Acesta produce următoarele rezultate în browserul dvs.:

După cum puteți vedea în imaginea de mai sus, elementul text ocupă o poziție sub elementele imagine și video, care se află pe aceeași linie. Pentru a poziționa acest element la sau deasupra liniei de bază, utilizați o valoare procentuală pozitivă.

Utilizarea valorii lungimii pe text

A {
 vertical-align: 90px;
}

Codul de mai sus aliniază linia de bază a elementului text la o lungime de 90 px deasupra liniei de bază a elementului părinte. Aceasta produce următoarele rezultate într-un browser:

Cum să aliniați vertical imaginile

The eticheta este un element inline, cu care proprietatea de aliniere verticală CSS funcționează bine.

Utilizarea supervalorii de aliniere verticală pe imagini

img {
 vertical-align: super;
}

Codul de mai sus poziționează imaginea la linia de bază superscriptă a elementului părinte. Aceasta înseamnă la o poziție deasupra liniei de bază, așa cum puteți vedea în următoarea ieșire:

Utilizarea valorii procentuale de aliniere verticală pe imagini

img {
 vertical-align: 25%;
}

Codul de mai sus aliniază linia de bază a elementului imagine la 25% deasupra liniei de bază a elementului părinte. Aceasta produce următorul efect de oglindă al super-valorii:

Utilizarea valorii lungimii de aliniere verticală pe imagini

img {
 vertical-align: 5px;
}

Codul de mai sus aliniază linia de bază a elementului imagine la o poziție de 5 px deasupra liniei de bază a elementului părinte. Acest lucru produce un efect similar cu cel al valorilor super și 25%:

Media încorporate, cum ar fi videoclipurile și cadrele iframe, sunt elemente HTML inline. Prin urmare, proprietatea CSS vertical-align funcționează excelent cu ele.

Utilizarea supervalorii de aliniere verticală pe un videoclip

video {
 vertical-align: sub;
}

Codul de mai sus poziționează videoclipul la linia de bază a indicelui elementului părinte. Aceasta înseamnă într-o poziție sub linia de bază, așa cum puteți vedea în următoarea ieșire:

Utilizarea valorii procentuale de aliniere verticală pe un videoclip

video {
 vertical-align: -25%;
}

Codul de mai sus aliniază linia de bază a elementului video la 25% sub linia de bază a elementului părinte. Aceasta produce următorul efect de oglindă al subvalorii:

Utilizarea valorii lungimii de aliniere verticală pe un videoclip

video {
 vertical-align: -5px;
}

Codul de mai sus aliniază linia de bază a elementului imagine la o poziție de 5 px sub linia de bază a elementului părinte. Acest lucru produce un efect precum valorile sub și -25%:

Cum să aliniați vertical elementele dintr-un tabel

Utilizarea proprietății de aliniere verticală cu un tabel este puțin dificilă, deoarece un tabel este un element bloc. Însă

Utilizarea valorii de sus cu alinierea verticală a datelor din tabel

td {
 înălțime: 40px;
 vertical-align: top;
}

Codul de mai sus adaugă o înălțime de 40px la fiecare celulă din tabel. Apoi aliniază datele din fiecare celulă în partea de sus a fiecărui rând. Aceasta produce următoarele rezultate în browser:

Utilizarea valorii din mijloc cu alinierea verticală a datelor din tabel

td {
 înălțime: 40px;
 vertical-align: mijloc;
}

Valoarea de mijloc de aliniere verticală din codul de mai sus centrează vertical datele în fiecare celulă. Acesta produce următoarele rezultate în browser:

Folosind valoarea de jos de aliniere verticală pe Datele tabelului

td {
 înălțime: 40px;
 vertical-align: fund;
}

Codul de mai sus aliniază datele din fiecare celulă la partea de jos a fiecărui rând. Acesta produce următoarele rezultate în browser:

Acum puteți alinia elementele de pe pagina dvs. web

Acum puteți utiliza proprietatea de aliniere verticală CSS cu o serie de elemente inline diferite, inclusiv text, conținut media încorporat și date de tabel. Regula generală este că proprietatea vertical-align funcționează numai pe elementele inline și inline-block.

Cu toate acestea, puteți utiliza această proprietate pe elementele bloc, trebuie doar să le convertiți mai întâi în elemente inline sau inline-block. Rețineți că puteți combina vertical-align cu alte proprietăți de aliniere, cum ar fi text-align.

Despre autor

Kadeisha Kean (52 articole publicate)

Kadeisha Kean este un dezvoltator de software Full-Stack și un scriitor tehnic/tehnologic. Are capacitatea distinctă de a simplifica unele dintre cele mai complexe concepte tehnologice; producând material care poate fi ușor de înțeles de orice novice în tehnologie. Este pasionată de scris, de dezvoltare de software interesant și de călătorie prin lume (prin documentare).

Mai multe de la Kadeisha Kean