[html] text-align: right; not working for <label>

Simply enough I can't get text to align to right in a <label> element.

HTML

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

CSS

#contact_form label {
  text-align: right;
}

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

You can see labels for name, phone, email etc... are aligned to the left, but I need them to be aligned to the right, so could anyone please suggest something?

This question is related to html css forms label alignment

The answer is


Label is an inline element - so, unless a width is defined, its width is exact the same which the letters span. Your div element is a block element so its width is by default 100%.

You will have to place the text-align: right; on the div element in your case, or applying display: block; to your label

Another option is to set a width for each label and then use text-align. The display: block method will not be necessary using this.


Similar questions with html tag:

Similar questions with css tag:

Similar questions with forms tag:

Similar questions with label tag:

Similar questions with alignment tag: