English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo CSS vertical-align vertical-align è utilizzato per definire il modo di allineamento verticale degli elementi incorporati o delle caselle delle tabelle. vertical-align è una delle caratteristiche importanti del CSS. Potrebbe non essere facile per i principianti padroneggiarla all'inizio, ma sono forniti esempi in fondo all'articolo per aiutarti a comprendere e padroneggiare questa proprietà rapidamente.
Applicato agli elementi inline o inline-block.
Influenza il modo in cui l'elemento è allineato, senza influire sul suo contenuto. (Escluso le cellule della tabella)
Quando viene applicato ai cellule della tabella, influisce sul contenuto delle cellule, non sull'elemento stesso.
| Valore | Descrizione |
|---|---|
| baseline | Allinea la linea di base dell'elemento con quella del genitore. Questo è il valore predefinito. |
| length | Serve per aumentare o ridurre la lunghezza dell'elemento in base alla lunghezza specificata. È possibile utilizzare valori negativi. |
| % | Serve per aumentare o ridurre l'elemento in base al percentuale dell'attributo 'altezza delle righe'. È permesso usare valori negativi. |
| sub | Allinea l'elemento come se fosse un pedice. |
| super | Allinea l'elemento come se fosse un sovrascritto. |
| top | Allinea l'alto dell'elemento con l'alto dell'elemento più alto della riga. |
| bottom | Allinea il basso dell'elemento con l'elemento più basso della riga. |
| text-top | L'alto dell'elemento è allineato con l'alto del font dell'elemento genitore. |
| middle | L'elemento viene posizionato nel centro del genitore. |
| text-bottom | Il basso dell'elemento è allineato con il basso del font dell'elemento genitore. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Eredita questa proprietà dal suo elemento genitore. |
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="/run/images/heart.jpg" alt="Simbolo di cuore"/> Questa è un'immagine con allineamento predefinito.</p>
<p><img src="/run/images/heart.jpg" style="vertical-align: text-top;" alt="Simbolo di cuore"/> Questa è un'immagine con allineamento superiore del testo.</p>
<p><img src="/run/images/heart.jpg" style="vertical-align: text-bottom;" alt="Simbolo di cuore"/> Questa è un'immagine con allineamento inferiore del testo.</p>
</body>
</html>Testa e vedrai‹/›Output:
Questa è un'immagine con allineamento predefinito.
Questa è un'immagine con allineamento superiore del testo.
Questa è un'immagine con allineamento inferiore del testo.