Perché vertical-align: text-top; non funziona in CSS

Question

Voglio allineare il testo alla parte superiore di un div. Sembra che vertical-align: text-top; dovrebbe fare il trucco, ma non funziona. Le altre cose che ho fatto, come mettere i div in colonne e la visualizzazione di un bordo tratteggiato (così posso vedere dove la parte superiore del div è) tutto bene lavoro.

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}

Answer 1

L'attributo vertical-align è solo per elementi in linea. Esso non avrà alcun effetto su elementi a livello di blocco, come un div. Anche testo superiore sposta solo il testo all'inizio della dimensione del carattere corrente. Se volete allineare verticalmente un elemento inline alla cima basta usare questo.

vertical-align: top;

Il tag paragrafo non è aggiornato. Inoltre, l'attributo vertical-align applicata ad un elemento di calibrazione non può visualizzare come previsto in alcuni browser mozilla.

Answer 2

vertical-align è solo dovuto lavorare su elementi che sono resi come inline. <span> è reso come linea di default, ma non tutti gli elementi sono. L'elemento comma blocco, <p>, è reso come un blocco per default. rendering Tabella tipi (ad esempio table-cell) permetteranno di utilizzare verticale allineare pure.

Alcuni browser possono consentire di utilizzare la proprietà CSS vertical-align su oggetti come ad esempio il blocco di paragrafo, ma non si suppone. Testo indicato come un paragrafo dovrebbe essere riempito di contenuti scritti in lingua o il mark-up non è corretto e dovrebbe usare uno di una serie di altre opzioni, invece.

Spero che questo aiuta!

Answer 3

qualcosa di simile

  position:relative;
  top:-5px;

solo sul elemento inline in sé funziona per me. Giocare con la parte superiore per farlo centrato verticalmente ...

Answer 4

È possibile applicare position: relative; al div e poi position: absolute; top: 0; a un paragrafo o luce all'interno di esso che contiene il testo.

Answer 5

È possibile utilizzare i selettori contestuali e spostare il vertical-align lì. Questo potrebbe funzionare con il tag p, allora. Prendete questo frammento di seguito come esempio. Qualsiasi tag p all'interno della vostra classe rispetteranno il controllo vertical-align:

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

Si potrebbe anche mantenere il vertical-align in entrambe le sezioni in modo che gli altri, gli elementi in linea avrebbero usato questo.

Answer 6

Il tutto di cui sopra non funziona per me, ho appena controllato questo e il suo lavoro:

  

vertical-align: super;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

Lo so da imbottitura o margine funzionerà, ma che è l'ultima scelta che preferisco.

Answer 7

position:absolute;
top:0px; 
margin:5px;

Ha risolto il problema.

Answer 8

È possibile utilizzare margin-top: -50% per spostare il testo fino alla parte superiore del div

.

margin-top: -50%;

Answer 9

Il problema che ho avuto non può essere fatta fuori dal informazioni che ho fornito:

• ho avuto il testo racchiuso tra i tag vecchi scuola <p>.

Ho cambiato il <p> per <span> e funziona bene.