Verticale Allinea il testo in un'etichetta

Mi è stato chiesto di allineare verticalmente il testo nelle etichette per i campi in un modulo ma non capisco perché non si muovano. Ho provato a mettere gli stili in linea usando vertical-align:top; e altri attributi come bottom e middle ma non funziona.Verticale Allinea il testo in un'etichetta

Qualche idea?

<dd> 
    <label class="<?=$email_confirm_class;?>" 
      style="text-align:right; padding-right:3px">Confirm Email</label> 
    <input class="text" type="text" 
      style="border:none;" name="email_confirm" 
      id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
      tabindex="4" /> 
    * 
</dd>

fonte

2009-10-12 Ian

Per fare ciò è necessario modificare la proprietà di allineamento verticale dell'input.

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

Ecco una versione più completa. È stato testato in IE 8 e funziona. vedere la differenza rimuovendo il vertical-align: middle dall'input:

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

fonte

2009-10-12 14:39:56

Nella mia esperienza i campi di testo sono piuttosto difficili da domare e l'imbottitura verticale funziona in modo più affidabile. – Wabbitseason

'vertical-align' non fa nulla qui (IE 8). – Joey

L'ho provato in IE8 e FF (ubuntu) ha rimosso l'allineamento verticale per vedere l'effetto e funziona perfettamente. Ho aggiornato anche l'esempio. –

Hai provato line-height? Non risolverà i tuoi problemi se ci sono più etichette di riga, ma può essere una soluzione rapida.

fonte

2009-10-12 14:40:36 Wabbitseason

Grazie! Ha funzionato nel mio caso ... – jpsstavares

Salvato un sacco di tempo :) –

Questo è quello che faccio di solito in testo "align verticale" all'interno etichette:

label { 
    display: block; 
    float: left; 
    padding-top: 2px; /*This needs to be modified to fit */ 
}

E non scala molto bene, ma funziona.

fonte

2009-10-12 14:48:23 peirix

Lo stile vertical-align viene utilizzato nelle celle della tabella, in modo che qui non faccia nulla per voi.

Per allineare le etichette per le caselle di input, è possibile utilizzare line-height:

line-height: 25px;

fonte

2009-10-12 14:50:20 Guffa

Non funziona per altezze variabili. – Rodrigo

Allineamento verticale funziona solo con linea o inline-block elementi, ed è relativo solo agli altri in linea [- blocco] elementi. Poiché si fa galleggiare l'etichetta, diventa un elemento blocco.

La soluzione più semplice nel tuo caso è impostare l'etichetta su display: inline-block e aggiungere vertical-align: middle alle etichette e agli ingressi. (Potresti scoprire che l'altezza del testo è tale che l'allineamento verticale non farà comunque alcuna differenza.)

fonte

2009-10-12 15:40:53 DisgruntledGoat

Mi sono imbattuto in questo tentativo di aggiungere etichette o cassette radio verticali. Ho dovuto fare questo:

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br /> 
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br /> 
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

Questo li manifestino per visualizzare correttamente, in cui l'etichetta è centrata sul pulsante di scelta, anche se ho dovuto incrementare il padding superiore con ogni riga, come si può vedere. Il codice non è carino, ma il risultato è.

fonte

2009-12-16 02:57:06

Ho avuto un problema simile e risolto avvolgendo il label in un div e impostando le seguenti stili:

<div style="display: table; vertical-align: middle"> 
    <label style="display: table-cell;" ... > ... </label> 
</div>

fonte

2013-03-26 11:59:48 Pablo

label { 
 
     padding: 10px 0; 
 
     position: relative; 
 
    }

aggiungere un po 'padding-top e padding-bottom invece di altezza.

fonte

2017-03-19 19:57:54

Forse si spiega come dovrebbe essere l'attributo di stile? Forse OP non sa cosa intendi. – einpoklum

Usa CSS sull'etichetta.

Ad esempio:

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

noti che la linea-altezza sarà regolare l'altezza della linea stessa, mentre il margine detterà quanto lontano altri elementi sarà fuori l'etichetta e l'imbottitura detterà qualsiasi spazio interno dal bordo esterno dell'etichetta. Il lavoro margin e padding come questo (in senso orario: In alto a destra In basso a sinistra), in modo da 2px 5px 3px 5px è:

2px Top 5px destro 3px inferiore 5px Sinistra

fonte

2017-04-21 16:44:28 psiclone

-1

Aggiunta disply:flex proprietà per l'etichetta otterrà il lavoro fatto!

fonte

2017-09-02 16:31:20

Verticale Allinea il testo in un'etichetta

risposta

Problemi correlati