Come centrare il testo sotto una casella di input con l'etichetta?

Question

Sembra facile, ma diciamo che sto usando il bootstrap e che la casella di input ha un'etichetta, quando ridimensiono il testo sottostante non è centrato.

Ecco qualche semplice html nel demo:

<form action="http://google.com"> 
     <div> 
      <label for="inputBox">Email address</label> 
      <input name="email" type="text" id="inputBox"/> 
      <br> 
      (Center under input) 
     </div> 
    </form> 

L'etichetta deve essere associata con la casella di testo di input, il testo '(Center in ingresso) dovrebbe apparire sotto la casella di immissione nel mezzo.

Quindi idealmente il testo (Centro sotto input) deve essere collocato centralmente sotto la casella di testo di input mentre l'etichetta agisce normalmente.

È possibile? Sto provando con un tavolo (di tutte le cose) al momento, ma non riesco a farlo funzionare, ho provato a posizionarlo ecc. Ancora senza fortuna.

Qualsiasi aiuto è molto apprezzato.

Answer 1

Se si desidera centrare le cose l'una rispetto all'altra, in genere dovrebbero essere collocate in un contenitore.

div, 
 
label { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
div { 
 
    text-align: center; 
 
}

<form action="http://google.com"> 
 
    <div> 
 
    <label for="inputBox">Email address</label> 
 

 
    <div> 
 
     <input name="email" type="text" id="inputBox" /> 
 
     <br>(Center under input) 
 
    </div> 
 
    </div> 
 
</form>

Il contenuto esempio è troppo astratta per dire, ma sul suo sito web centrato dovrebbe probabilmente essere un altro elemento etichetta se è associato con l'ingresso.

Answer 2

Si può uccidere 2 piccioni con una fava - ha un ingresso accessibile che è compatibile con gli screen reader, e centrare il testo, utilizzando tale struttura markup:

label { 
 
    max-width:300px; 
 
    display:block; 
 
} 
 

 
label span { 
 
    text-align:left; 
 
    display:block; 
 
} 
 
label input { 
 
    width:100%; 
 
}

<form action="http://google.com"> 
 
    <label> 
 
     <span>Email address</span> 
 
     <input name="email" type="text" id="inputBox"/> 
 
     <span style="text-align:center">center me</span> 
 
    </label> 
 
</form>

Avviso don 'ho bisogno dell'attributo for. È un modo pulito per raggiungere l'accessibilità. Alcuni semplici CSS allineano il testo. Se non vuoi usare gli stili in linea, puoi sempre scrivere un'altra classe.