49

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?

1
  • 2
    give display block property to label and it will work
    – defau1t
    Feb 1, 2012 at 19:03

3 Answers 3

81

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.

0
6

You can make a text align to the right inside of any element, including labels.

Html:

<label>Text</label>

Css:

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

This way, you give a width and height to your label and make any text inside of it align to the right.

4

As stated in other answers, label is an inline element. However, you can apply display: inline-block to the label and then center with text-align.

#name_label {
    display: inline-block;
    width: 90%;
    text-align: right;
}

Why display: inline-block and not display: inline? For the same reason that you can't align label, it's inline.

Why display: inline-block and not display: block? You could use display: block, but it will be on another line. display: inline-block combines the properties of inline and block. It's inline, but you can also give it a width, height, and align it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.