html - titulo - text-align: center no funcionará con la etiqueta de forma<label>(?)

justificar texto html

Question

Estaba revisando un sitio que acababa de completar y solucioné algunos problemas de accesibilidad. Tuve una forma:

<input type="hidden" name="redirect" value="thank-you.php" />
<p>Enter your Email Address to receive our Weekly Newsletter</p>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

Esto se marcó porque no hay ninguna etiqueta para identificar el campo de entrada para ingresar la dirección de correo electrónico. Así que cambié la

etiqueta a una etiqueta como tal:

<input type="hidden" name="redirect" value="thank-you.php" />
<label for="formifemail">Enter your Email Address to receive our Weekly Research</label>                            
<input name="email" type="text" id="formifemail" size="21" />
<input type="image" src="images/newsletter_button.jpg" alt="submit button" border="0" name="Submit" id="Submit" value="Send" />

y el CSS:

#formItem label {
    text-align:center;
    line-height:150%;
    font-size:.85em;
}

Pero el texto aparece como justificado a la izquierda, y no centrado. He mirado a mi alrededor que no hay errores obvios. Esto está sucediendo tanto en FF 3.x como en IE 7.x

Answer 1

Esto se debe a que la label es un elemento en línea y, por lo tanto, es tan grande como el texto que contiene.

Lo posible es mostrar su label como un elemento de bloque como este:

#formItem label {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: .85em;
}

Sin embargo, si desea utilizar la etiqueta en la misma línea con otros elementos, debe configurar display: inline-block; y dale un ancho explícito (que no funciona en la mayoría de los navegadores), o necesitas envolverlo dentro de un div y hacer la alineación en el div .

Answer 2

label es un elemento en línea por lo que su ancho es igual al ancho del texto que contiene. El navegador está mostrando la etiqueta con text-align:center pero ya que la etiqueta es tan ancha como el texto que no se nota.

Lo mejor que puede hacer es aplicar un ancho específico a la label que sea mayor que el ancho del contenido, esto le dará los resultados que desea.