text-align: right; no funciona para <label>

Question

Simplemente no consigo que el texto se alinee correctamente en un elemento <label>.

HTML

<div id="contact_form"> 
<label for="name" id="name_label">Name:</label> 
</div> 

CSS

#contact_form label { 
    text-align: right; 
} 

Mi página: http://freshbeer.lv/development/en/contact.php

Se puede ver las etiquetas de nombre, teléfono, correo electrónico, etc ... están alineados con las a la izquierda, pero necesito que estén alineados a la derecha, ¿alguien podría sugerir algo?

Answer 1

Label es un elemento en línea, por lo que, a menos que se defina un ancho, su ancho es exactamente el mismo que las letras abarcan. Su elemento div es un elemento de bloque por lo que su ancho es por defecto 100%.

Usted tendrá que colocar el text-align: right; en el elemento div en su caso, o la aplicación de display: block; a su label

Otra opción es establecer un ancho de cada etiqueta y luego usar text-align. El método display: block no será necesario al usar esto.

Answer 2

Puede hacer que un texto se alinee a la derecha dentro de cualquier elemento, incluidas las etiquetas.

HTML:

<label>Text</label> 

Css:

label {display:block; width:x; height:y; text-align:right;} 

esta manera, se da una anchura y altura a su etiqueta y hacer cualquier texto dentro de ella se alinean a la derecha.