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:

Linea di base:Allinea la linea di base dell'elemento con la linea di base del suo elemento genitore. Questo è il valore predefinito per la maggior parte degli elementi.Sub:Allinea la linea di base dell'elemento con la linea di base del pedice del carattere dell'elemento genitore.Super:Allinea la linea di base dell'elemento con la linea di base dell'apice del carattere dell'elemento genitore.Superiore:Allinea la parte superiore dell'elemento con la parte superiore dell'elemento più alto sulla linea all'interno del riquadro della linea.Testo in alto:Allinea la parte superiore dell'elemento con la parte superiore del carattere dell'elemento genitore.Mezzo:Centra verticalmente l'elemento rispetto all'elemento genitore.Metter il fondo a:Allinea la parte inferiore dell'elemento con la parte inferiore dell'elemento più basso sulla linea all'interno del riquadro della linea.Testo in basso:Allinea la parte inferiore dell'elemento con la parte inferiore del carattere dell'elemento genitore.Percentuale:L'elemento è allineato verticalmente a una percentuale specificata dell'altezza della linea. Ad esempio, vertical-align: 50% centrerà l'elemento verticalmente all'interno del suo elemento genitore.

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:

La linea di base di allineamento verticalevalue allinea la linea di base dell'elemento con la linea di base del suo elemento genitore. Questo è il comportamento predefinito per la maggior parte degli elementi a livello in linea.

Linea di base Altro testo

2. Pedice e apice:

L'allineamento verticale:Il valore secondario allinea la linea di base dell'elemento con la linea di base del pedice del carattere dell'elemento genitore, facendolo apparire come un pedice. D'altra parte,allineamento verticale:Super allinea la linea di base dell'elemento con la linea di base dell'apice del carattere dell'elemento genitore.

H₂O è acqua. X²+ e²= r²

3. Allineamento superiore e inferiore:

L'allineamento verticale:Il valore superiore allinea la parte superiore dell'elemento con la parte superiore dell'elemento più alto sulla linea all'interno del riquadro della riga. Allo stesso modo,allineamento verticale:Il fondo allinea il fondo dell'elemento con il fondo dell'elemento più basso sulla linea all'interno del riquadro della linea.

Allineato in alto Allineato in basso

4. Allineamento centrale:

tutorial su pyspark

L'allineamento verticale:Il valore medio centra verticalmente l'elemento rispetto all'elemento genitore. Viene spesso utilizzato per centrare icone o immagini all'interno del testo.

Questa icona è centrata verticalmente

5. Allineamento testo in alto e testo in basso:

L'allineamento verticale:Il valore text-top allinea la parte superiore dell'elemento con la parte superiore del carattere dell'elemento genitore eallineamento verticale:Text-bottom allinea la parte inferiore dell'elemento con la parte inferiore del carattere dell'elemento genitore.

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: &apos;&apos;; 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 () per controllare l'allineamento del contenuto all'interno delle celle.

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>&#x2B50;</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> 

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. 

Produzione

Vantaggi dell'allineamento verticale nei CSS

Facile da usare per gli elementi in linea:La proprietà di allineamento verticale è semplice per allineare elementi, come immagini, icone o testo, all'interno di una riga di testo o altri elementi.Ampio supporto per browser:La proprietà di allineamento verticale ha un buon supporto per i browser ed è ampiamente supportata da diversi browser.Opzioni multiple di allineamento:Fornisce varie opzioni di allineamento, come linea di base, centro, alto, basso, testo in alto, testo in basso, pedice e apice, offrendo agli sviluppatori flessibilità nell'allineare gli elementi in base alle loro esigenze.Allineamento reattivo:Può essere utilizzato nel responsive design per adattare l'allineamento verticale in base alle dimensioni del contenitore o allo spazio disponibile.Semplicità per gli elementi in linea:Per allineare piccoli elementi come icone o immagini all'interno di una riga di testo, la proprietà di allineamento verticale fornisce una soluzione relativamente semplice senza richiedere tecniche di layout complesse.Ritocchi:La proprietà consente di regolare con precisione la posizione verticale degli elementi, che può essere utile per raggiungere obiettivi di progettazione specifici.Coerenza con le celle della tabella:Nel contesto delle tabelle, la proprietà vertical-align controlla l'allineamento del contenuto all'interno delle celle della tabella. Ciò può aiutare a mantenere la coerenza tra i layout basati su tabelle.Combinazione con il testo:Allinea in modo efficace gli elementi con il contenuto testuale, ad esempio allineando icone o etichette in linea con testo adiacente.Mantenimento delle proporzioni:Quando si allineano immagini o icone all'interno di una riga di testo, l'allineamento verticale può aiutare a mantenere le proporzioni di questi elementi, soprattutto se combinato con dimensioni dei caratteri e altezze di riga appropriate.Correzioni rapide di allineamento:Quando sono necessarie soluzioni rapide per problemi di allineamento verticale, soprattutto in scenari con contenuti misti, l'allineamento verticale può fornire una soluzione rapida senza richiedere una ristrutturazione approfondita del layout.Stile e-mail CSS:Nelle e-mail HTML, dove è necessario supportare meglio layout complessi, l'utilizzo dell'allineamento verticale può essere utile per l'allineamento verticale di base degli elementi senza fare affidamento su fogli di stile esterni o tecniche complesse.Compatibile con display:blocco in linea: la proprietà vertical-align è compatibile con gli elementi blocco in linea, consentendo un facile allineamento verticale di tali elementi all'interno di una linea.Mantenere la coerenza:Per gli elementi che fanno parte di dati tabulari o che devono essere allineati con elementi simili su righe o colonne diverse, l'allineamento verticale può aiutare a mantenere la coerenza visiva.Compatibilità del browser:A differenza di alcune tecniche CSS più recenti, l'allineamento verticale fa parte dei CSS da molto tempo e gode di una buona compatibilità tra browser.

Svantaggi dell'allineamento verticale nei CSS

Limitato agli elementi in linea:La limitazione più significativa della proprietà di allineamento verticale è che funziona solo per elementi a livello in linea o celle di tabella. Non si applica direttamente agli elementi a livello di blocco. Ciò può rendere l'allineamento verticale più impegnativo per elementi più grandi o layout complessi.Comportamento incoerente:L'allineamento verticale può essere complicato e incoerente, soprattutto con dimensioni di carattere, altezze di linea ed elementi nidificati diversi. Lo stesso valore di allineamento verticale può produrre risultati diversi in base al contesto.Stranezze del browser:Alcuni browser meno recenti potrebbero avere interpretazioni o stranezze incoerenti con la proprietà di allineamento verticale, che possono portare a risultati imprevisti. Tuttavia, questo problema è migliorato con il progresso dei browser moderni.Controllo limitato sulla spaziatura:La proprietà vertical-align si occupa principalmente dell'allineamento verticale degli elementi, ma offre solo un piccolo controllo sulla spaziatura tra gli elementi. La regolazione della spaziatura spesso richiede ulteriori modifiche CSS o HTML.Flexbox e Grid come alternative:Per requisiti di layout più complessi e allineamento verticale di elementi a livello di blocco, gli sviluppatori spesso si affidano a Flexbox o CSS Grid, che forniscono soluzioni più robuste e prevedibili.Non adatto per il centraggio completo:Sebbene l'allineamento verticale sia utile per allineare verticalmente gli elementi in linea, è adatto per centrare completamente (orizzontalmente e verticalmente) elementi a livello di blocco con tecniche CSS aggiuntive.Nome fuorviante:Il nome 'vertical-align' può essere fuorviante perché non allinea l'elemento verticalmente nel modo in cui spesso gli sviluppatori si aspettano. Controlla invece l'allineamento del contenuto dell'elemento all'interno del suo riquadro di riga.Complessità con caratteri diversi:Il comportamento dell'allineamento verticale può essere imprevedibile quando si ha a che fare con elementi con dimensioni di carattere e altezze di linea diverse. Ciò può rendere difficile un allineamento verticale coerente.Limitato per layout complessi:Non è adatto a layout complessi o scenari in cui è necessario allineare verticalmente elementi più grandi a livello di blocco all'interno di un contenitore principale.Compatibilità tra browser:Sebbene i browser moderni abbiano migliorato il supporto per l'allineamento verticale, i browser più vecchi potrebbero ancora presentare incoerenze o comportamenti imprevisti.Tecniche alternative:Le moderne tecniche di layout CSS come Flexbox e CSS Grid offrono modi più potenti e prevedibili per gestire requisiti di layout complessi, incluso l'allineamento verticale di elementi sia in linea che a livello di blocco.Considerazioni sull'accessibilità:L'utilizzo dell'allineamento verticale per il layout potrebbe non essere l'approccio più accessibile, poiché potrebbe interferire con gli screen reader e altre tecnologie assistive. L'HTML semantico e le tecniche CSS adeguate sono spesso scelte migliori per l'accessibilità.Sfide di debug:Il debug di comportamenti imprevisti o problemi di allineamento relativi all'allineamento verticale a volte può essere complicato, soprattutto quando si ha a che fare con elementi nidificati e dimensioni di carattere variabili.Evoluzione del layout Web:Con l’evoluzione del panorama dello sviluppo web, nuove tecniche di layout come CSS Grid Layout e Flexbox forniscono soluzioni più moderne e complete per le sfide del layout, rendendo potenzialmente l’allineamento verticale meno rilevante per molti scenari.

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.