Text-align: right; не работает для <label>

Достаточно просто я не могу получить текст для выравнивания вправо в элементе <label>.

HTML

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

CSS

#contact_form label {
  text-align: right;
}

Моя страница: http://freshbeer.lv/development/en/contact.php

Вы можете видеть метки для имени, телефона, электронной почты и т.д.... выровнены влево, но мне нужно, чтобы они были выровнены вправо, так что кто-нибудь может предложить что-то?

Ответ 1

Label является встроенным элементом - поэтому, если ширина не определена, его ширина точно та же, что и буквы. Ваш элемент div является блочным элементом, поэтому его ширина по умолчанию равна 100%.

Вам нужно будет поместить text-align: right; в элемент div в вашем случае или применить display: block; к вашему Label

Другой вариант - установить ширину для каждой метки, а затем использовать text-align. Метод display: block не понадобится, используя это.

Ответ 2

Вы можете сделать выравнивание текста справа внутри любого элемента, включая метки.

Html:

<label>Text</label>

Css:

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

Таким образом, вы даете ширину и высоту своей метке и выравниваете текст внутри нее вправо.