Nei CSS, la proprietà vertical-align controlla l'allineamento verticale degli elementi a livello in linea o delle celle della tabella all'interno dell'elemento che li contiene. Si applica agli elementi che fanno parte di una riga di testo o vengono visualizzati come blocchi in linea o celle di tabella.
La proprietà 'vertical-align' viene comunemente utilizzata per elementi in linea come immagini, testo o elementi di blocco in linea all'interno di una riga di testo. Non si applica direttamente agli elementi a livello di blocco; tuttavia, puoi utilizzare tecniche come flexbox o posizionamento per allinearli verticalmente.
Sintassi:
Ecco la sintassi di base per la proprietà vertical-align:
selector { vertical-align: value; }
Il 'valore' può essere una delle seguenti opzioni:
NOTA: Ricordare che 'vertical-align' ha il suo comportamento specifico a seconda del tipo di elemento e del contesto in cui viene utilizzato, quindi i suoi effetti potrebbero non essere sempre chiari. È particolarmente utile per allineare gli elementi in linea con testo o altri elementi in linea.
Esempi
Ecco alcuni ulteriori dettagli ed esempi relativi alla proprietà 'vertical-align' nei CSS:
1. Allineamento della linea di base:
Linea di base Altro testo
2. Pedice e apice:
H2O è acqua. X2+ e2= r2
3. Allineamento superiore e inferiore:
Allineato in alto Allineato in basso
4. Allineamento centrale:
tutorial su pyspark
Questa icona è centrata verticalmente
5. Allineamento testo in alto e testo in basso:
Allineato in alto al testo Allineato in basso al testo
6. Allineamento percentuale:
L'utilizzo di un valore percentuale con allineamento verticale consente di allineare l'elemento verticalmente a una percentuale specifica dell'altezza della linea. Ad esempio, allineamento verticale: 50% centrerà l'elemento a metà dell'altezza della linea.
Centrato verticalmente
concatena la stringa Java
7. Centraggio verticale degli elementi a livello di blocco:
Per centrare verticalmente un elemento a livello di blocco all'interno del suo genitore, puoi utilizzare il layout flexbox o griglia.
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ }
8. Centraggio verticale con altezza elemento sconosciuta:
Se non conosci l'altezza dell'elemento che desideri centrare verticalmente, puoi utilizzare una combinazione di posizione e trasformazione:
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
9. Centratura verticale con testo su più righe:
Per centrare verticalmente il testo su più righe all'interno di un contenitore, puoi utilizzare una combinazione di flexbox e uno pseudo-elemento:
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
10. Centratura verticale delle immagini in un contenitore con proporzioni diverse:
Se disponi di immagini con proporzioni diverse che desideri centrare all'interno di un contenitore, puoi utilizzare una combinazione di flexbox e adattamento oggetto:
HTML:
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS:
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; }
11. Combinazione dell'allineamento verticale con l'altezza della linea:
Puoi combinare la proprietà vertical-align con la proprietà line-height per ottenere un allineamento verticale più preciso, soprattutto con caratteri di dimensioni maggiori.
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; }
12. Utilizzo della proprietà di visualizzazione per l'allineamento:
Sebbene l'allineamento verticale funzioni principalmente con elementi a livello in linea, puoi modificare la proprietà di visualizzazione per ottenere l'allineamento verticale per elementi a livello di blocco in contesti specifici.
.container { display: table-cell; vertical-align: middle; }
13. Allineamento verticale nelle tabelle:
La proprietà di allineamento verticale viene spesso utilizzata nelle celle della tabella (
controllo nullo Java
td { vertical-align: middle; }
14. Allineamento degli elementi del blocco in linea:
Puoi utilizzare l'allineamento verticale per allineare gli elementi del blocco in linea all'interno di una riga di testo, ad esempio le icone accanto al testo.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; }
Questi sono solo alcuni esempi di come gestire l'allineamento verticale in diversi scenari. A seconda del layout e dei requisiti specifici, potrebbe essere necessario adattare o combinare queste tecniche per ottenere i risultati desiderati. I CSS forniscono vari strumenti per gestire efficacemente l'allineamento verticale in vari contesti.
Ricorda che sebbene la proprietà vertical-align abbia degli usi, esistono soluzioni più complete per tutti gli scenari di allineamento, in particolare per gli elementi a livello di blocco. Per layout e requisiti di allineamento più complessi, si consiglia di esplorare le moderne tecniche di layout CSS come Flexbox, CSS Grid o anche valori di posizione CSS (come assoluto e relativo) per ottenere i risultati desiderati in modo più efficace e prevedibile.
Ricorda che l'allineamento verticale influisce solo sugli elementi a livello in linea o sulle celle della tabella. Utilizza tecniche come flexbox, layout a griglia o posizionamento per allineare verticalmente gli elementi a livello di blocco.
Qualche altro esempio
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>Provalo adesso
Produzione
Ora, c'è un altro esempio in cui stiamo allineando il testo con l'immagine.
Esempio
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment.Provalo adesso
Produzione
Vantaggi dell'allineamento verticale nei CSS
Svantaggi dell'allineamento verticale nei CSS
Nel complesso, mentre la proprietà di allineamento verticale è utile per allineare elementi in linea o celle di tabella all'interno di una riga di testo, gli sviluppatori spesso necessitano di altre tecniche CSS per requisiti di layout e posizionamento più avanzati, soprattutto quando si tratta di elementi a livello di blocco o layout complessi. CSS Flexbox e CSS Grid sono potenti alternative per un allineamento e un controllo del posizionamento più ampi.
Conclusione
La proprietà di allineamento verticale è utile per allineare gli elementi in linea all'interno delle celle di testo o di tabella. Tuttavia, presenta dei limiti e può essere difficile da utilizzare in modo efficace per layout complessi o elementi a livello di blocco. Gli sviluppatori dovrebbero prendere in considerazione le moderne tecniche di layout CSS che forniscono maggiore controllo e flessibilità sull'allineamento e sul posizionamento.