CSS Vertical align middle

Sto provando ad allineare verticalmente un elemento SPAN nel mezzo di un elemento genitore.CSS Vertical align middle

Questo è quello che sto facendo:

enter image description here

Sto cercando di ottenere sia il nome utente e la password etichette per essere allineata verticalmente (al centro) con le caselle di immissione.

Questo è il mio codice HTML:

<div class="login_field_wrap"> 
    <span>Username</span> 
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username"> 
    <div class="clear"></div> 
</div>

Questo è quello che ho provato:

.clear { clear:both; } 
.login_field_wrap span { 
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; } 
.login_field_wrap input { 
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA; 
margin:0px; width:250px; }

verticale allineando un elemento immagine all'interno di questo involucro DIV funziona assolutamente bene, bene in Chrome in ogni caso, semplicemente non si allinea con il mio SPAN!

Qualsiasi aiuto sarebbe sorprendente.

fonte

2012-03-28 TheCarver

Si prega di essere gentile con i vostri utenti e, piuttosto che un generico '', utilizzare un'etichetta che è esplicitamente associata al controllo del modulo: ' Username'. – steveax

@steveax: utilizzo sempre le etichette per caselle di controllo e pulsanti di opzione a causa delle dimensioni ridotte. L'utilizzo di un'etichetta aumenta ovviamente l'area cliccabile rendendone più semplice l'utilizzo, ma è davvero necessario fornire un'etichetta per una casella di testo che è 250px x 30px? Durante la navigazione in Internet, non ho mai fatto clic sull'etichetta di una casella di testo per concentrarsi su di essa. C'è un'altra ragione per cui dovrei usare un'etichetta? – TheCarver

Aumentare l'area attiva è solo uno dei vantaggi dell'uso delle etichette, l'altro motivo importante è per gli utenti di screen reader. Associando esplicitamente le etichette ai controlli del modulo, lo screen reader leggerà correttamente le etichette quando il controllo del modulo è focalizzato. – steveax

L'allineamento verticale tramite CSS può essere complicato, e mentre CSS3 genera una manciata di chicche per aiutare in questo, il supporto CSS3 è scarno nell'attuale mercato dei browser.

Per ottenere questo effetto, ho impostato la proprietà line-height dell'elemento figlio uguale all'altezza del relativo elemento contenitore.

Per esempio, vorrei utilizzare il seguente CSS:

.login_field_wrap { height:30px; /* or whatever is appropriate for your design */ 
.login_field_wrap span { height:30px; line-height:30px; } 
.login_field_wrap input { height:30px; line-height:30px; }

L'unico aspetto negativo di utilizzare line-height per allineare verticalmente qualcosa è se il testo overflow su una seconda riga, nel qual caso il vostro disegno sarà essenzialmente romperà.

fonte

2012-03-28 23:13:53 Moses

Funziona alla grande, ma le persone dovrebbero sapere che se l'elemento genitore cambia la dimensione in modo dinamico, l'allineamento si rovinerà (o almeno rimarrà all'interno dell'altezza di riga predefinita: 30px'). Se cambia, dovresti prendere in considerazione l'utilizzo del metodo di visualizzazione della tabella. In entrambi i casi, è necessario un modo migliore per allineare verticalmente gli elementi in linea pertinenti. Ottima risposta @Moses. –

Non sono mai stato in grado di ottenere vertical-align per funzionare in qualcosa di diverso da <td> s.
Una soluzione che uso comunemente sarebbe quella di definire un'altezza per .login_field_wrap, quindi impostare la proprietà line-height nella scala < > uguale all'altezza di .login_field_wrap.

fonte

2012-03-28 23:12:32 Paul

Ingannevole, eh ?! Sono riuscito a ottenere un elemento immagine da allineare verticalmente (al centro) all'interno di un DIV di avvolgimento, ma non lo farà con lo span !! – TheCarver

-3

Penso che text-align: center; dovrebbe lavorare anche sugli elementi. Se non sbaglio, di solito funziona anche se non sul testo.

fonte

2012-03-28 23:32:16 corvid

Allinea testo allineato orizzontalmente allinea il testo e alcuni elementi. Sto cercando l'allineamento verticale impostato al centro come dice il titolo della domanda. Grazie per aver fatto lo sforzo, a prescindere. – TheCarver

Basta rimuovere la proprietà float dal span class e impostarlo in display:inline-block e la proprietà vertical-align:middle funzionerà, in questo modo:

.login_field_wrap span { 
    color: #333333; 
    display: inline-block; 
    font-size: 13px; 
    font-weight: bold; 
    text-align: left; 
    vertical-align: middle; 
}

Edit: ripulito il codice un po ', ecco una demo che dovrebbe funziona attraverso i browser. http://jsfiddle.net/kUe3Y/

fonte

2012-03-28 23:46:44

Questo ha funzionato anche per il mio nodo. Grazie. –

ho trovato il modo più semplice per farlo è quello di impostare la proprietà parent visualizzazione contenitore per table e la proprietà di visualizzazione secondario al table-cell

#parent{ 
    display:table; 
} 

#child{ 
    display:table-cell; 
    vertical-align:middle; 
}

sono stato in grado di ottenere questo per allineare verticalmente un elemento di ancoraggio all'interno di un div.

Inserisco i termini della domanda in questo jsFiddle.

fonte

2014-01-02 15:22:41

CSS Vertical align middle

risposta

Problemi correlati