Horizontally Align Labels with CSS

Question

I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).

I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:

enter image description here

This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.

Here's my current CSS (the classes should be self-explanatory):

.propertyTitle {
    text-transform: uppercase;
    width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
    text-align: left;
}

And my current HTML:

<div>
    <div>
        <label class="propertyTitle">Hello:</label>
        <label class="propertyValue">World</label>
    </div>
    <div>
        <label class="propertyTitle">Goodbye:</label>
        <label class="propertyValue">To All of the People in the World</label>
    </div>
    <div>
        <label class="propertyTitle">I Want:</label>
        <label class="propertyValue">These labels to line up</label>
    </div>
</div>

The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.

Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.

EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?

score 5 · Accepted Answer · answered Mar 07 '14 at 17:52

grouping your divs and labels like so:

<div>
    <div class="titleWrap">
        <label class="propertyTitle">Hello:</label>
        <label class="propertyTitle">Goodbye:</label>
        <label class="propertyTitle">I Want:</label>
    </div>
    <div class="valueWrap">
        <label class="propertyValue">World</label>
        <label class="propertyValue">To All of the People in the World</label>
        <label class="propertyValue">These labels to line up</label>
    </div>
</div>

with the following CSS:

.propertyTitle {
    display:block;
    text-transform: uppercase;
    width: auto;
}
.titleWrap{
    display:inline-block;
}

.propertyValue {
    display:block;
    width:auto;
}
.valueWrap {
    display:inline-block;
}

should give you the desired result without having to specify the widths

Check out this jsFiddle

score 1 · Answer 2 · answered Mar 07 '14 at 17:40

1

try using display:inline-block on your labels

.propertyTitle {
    text-transform: uppercase;
    width: 300px;/*Why doesn't this have any effect?*/
    display: inline-block;
}

answered Mar 07 '14 at 17:40

Millard

1,157
1
9
19

Thanks, per my update, is there a way to do this without having to set the width of my "title" labels? – Sven Grosen Mar 07 '14 at 17:50

score 1 · Answer 3 · edited Mar 07 '14 at 17:47

1

by default label is an inline element. that's why width property doesn't apply to label. to apply the width you have to convert the label into a block level element by using display:block.

I hope it clarify the answer.

so you have to use this CSS property in your code.

   .propertyTitle {
     text-transform: uppercase;
    display:inline-block; /*this will make the label a block level element*/ 
    width: 300px;/*Why doesn't this have any effect?*/
    }

edited Mar 07 '14 at 17:47

13ruce1337

753
1
6
13

answered Mar 07 '14 at 17:44

Kheema Pandey

9,977
4
25
26

Thanks, so am I stuck setting the width of my label to make this work? – Sven Grosen Mar 07 '14 at 17:51
@ledbutter as per the HTML code I guess you want to make a form.. you can use `float:left` and giving `padding` or `margin` but that will not make any impact unless you define the `width` property to `label` .. why you wan't to avoid the width property? – Kheema Pandey Mar 07 '14 at 17:54
I want to avoid the width property so that if I get a "title" that exceeds my set width, I don't get undesired output. At the same time, I want these two labels to be spaced reasonably close together for readability. – Sven Grosen Mar 07 '14 at 17:57
In terms of usability you should move label to right. if you don't use width you will get this kind of results. check the Demo. http://jsbin.com/sexenuga/1/edit – Kheema Pandey Mar 07 '14 at 18:05

score 0 · Answer 4 · answered Jun 08 '21 at 17:08

0

More modern version is display: inline-flex;

answered Jun 08 '21 at 17:08

Brendan Jackson

305
1
3
13

Horizontally Align Labels with CSS

4 Answers4