CSS - allineamento verticale

Descrizione

La proprietà di allineamento verticale determina l'allineamento del testo all'interno di una riga o all'interno di una cella di tabella.

Possibili valori

  • baseline - La linea di base dell'elemento è allineata con la linea di base dell'elemento padre.

  • sub - La linea di base dell'elemento viene abbassata al punto appropriato per il testo in pedice.

  • super - La linea di base dell'elemento viene elevata al punto appropriato per il testo in apice.

  • top - La parte superiore della casella dell'elemento è allineata con la parte superiore della casella di riga, nel contesto del contenuto in linea, o con la parte superiore della cella della tabella nel contesto delle tabelle.

  • text-top - La parte superiore del riquadro dell'elemento è allineata con la parte superiore del riquadro in linea più alto della riga.

  • middle - La linea di base dell'elemento è allineata con il punto definito dalla linea di base dell'elemento padre più metà dell'altezza x del carattere dell'elemento padre, nel contesto del contenuto in linea.

  • bottom - La parte inferiore della casella dell'elemento è allineata con la parte inferiore della casella di riga, nel contesto del contenuto in linea, o con la parte inferiore della cella della tabella nel contesto delle tabelle.

  • text-bottom - La parte inferiore del riquadro dell'elemento è allineato con la parte inferiore del riquadro in linea più basso nella riga.

  • percentage - La linea di base dell'elemento viene alzata o abbassata della percentuale data del valore per l'altezza della linea di proprietà.

  • length- La linea di base dell'elemento viene aumentata o abbassata del valore di lunghezza specificato. Per questa proprietà sono consentiti valori di lunghezza negativi. Un valore di lunghezza pari a 0 per questa proprietà ha lo stesso effetto della linea di base del valore.

Si applica a

elementi ed elementi a livello di riga con una visualizzazione di celle di tabella.

Sintassi DOM

object.style.verticalAlign = "baseline";

Esempio

Ecco l'esempio:

<html>
   <head>
   </head>

   <body>
      <table style = "height:200px; width:400px;border:1px solid red;">
         <tr>
            <td style = "vertical-align:bottom;" >
               <p>This will be aligned to bottom of the cell.</p>
            </td>
         </tr>
      </table>
   </body>
</html>

Questo produrrà il seguente risultato: