web-dev-qa-db-fra.com

alignement du texte: à droite; ne fonctionne pas pour <label>

Assez simplement, je ne parviens pas à aligner le texte à droite dans un <label> élément.

[~ # ~] html [~ # ~] 

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

[~ # ~] css [~ # ~] 

#contact_form label {
  text-align: right;
}

Ma page: http://freshbeer.lv/development/en/contact.php

Vous pouvez voir les étiquettes pour le nom, le téléphone, l'e-mail, etc. ... alignées à gauche, mais j'ai besoin qu'elles soient alignées à droite, alors quelqu'un pourrait-il suggérer quelque chose?

htmlcssformslabelalignment
32
Ilja

Label est un élément en ligne - donc, à moins qu'une largeur ne soit définie, sa largeur est exactement la même que celle des lettres. Votre élément div est un élément bloc donc sa largeur est par défaut de 100%.

Vous devrez placer le text-align: right; sur l'élément div dans votre cas, ou en appliquant display: block; à votre label

Une autre option consiste à définir une largeur pour chaque étiquette, puis à utiliser text-align. Le display: block la méthode ne sera pas nécessaire en utilisant ceci.

59
janhartmann

Vous pouvez aligner un texte à droite à l'intérieur de n'importe quel élément, y compris les étiquettes.

Html:

<label>Text</label>

Css:

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

De cette façon, vous donnez une largeur et une hauteur à votre étiquette et faites aligner tout texte à l'intérieur vers la droite.

3
Gui Premonsa