vertical alignment for Label, DIV and Span in HTML

Question

I'm using third party libraries like Kendo which output various types of HTML elements when they render.

So you might end up with a scenario such as this:

<ul>
    <li>
        <label>label text</label>
        <div>muli select widget</div>
        <span>date selector</span>
    </li>
</ul>

NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.

The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:

http://jsfiddle.net/tMJFF/

How would I get all three these elements to vertically align perfectly?

possible duplicate of [Vertical align img and text inside
](http://stackoverflow.com/questions/5219324/vertical-align-img-and-text-inside-p) — Marc Audet, Sep 23 '13 at 10:25

score 2 · Answer 1 · answered Sep 23 '13 at 10:12

2

Use inline-block property on all elements

label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}

http://jsfiddle.net/6vQ4Q/

answered Sep 23 '13 at 10:12

Anon

2,854
14
18

score 1 · Answer 2 · answered Sep 23 '13 at 11:32

You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :

ul.kendo-selector-class-of-choice li * {
    vertical-align: middle;
    display : inline; /* for lte IE7 only */
}

Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class

The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.

http://jsfiddle.net/tMJFF/11/

score 0 · Answer 3 · answered Sep 23 '13 at 10:14

Simply add vertical-align:middle;

Here is referenced Fiddle

label {
    vertical-align:middle;
    line-height:20px;
    border:1px solid blue;
}
.div-input {
    vertical-align:middle;
    border:1px solid black;
    margin-right:20px;
    display:inline-block;
    height:20px;
    width:100px;
    box-model:collapse-box
}
.span-input {
    vertical-align:middle;
    border:1px solid black;
    display:inline-block;
    height:20px;
    width:100px;
}

score 0 · Answer 4 · answered Sep 23 '13 at 10:14

0

label {
    line-height:20px;
    border:1px solid blue;
    vertical-align:top;
}

answered Sep 23 '13 at 10:14

Ankit Agrawal

6,034
6
25
49

score 0 · Answer 5 · answered Sep 23 '13 at 10:21

0

vertical align all elements in li to middle.

ul li *{
    vertical-align:middle;
}

answered Sep 23 '13 at 10:21

gp.

8,074
3
38
39

score 0 · Answer 6 · answered Sep 23 '13 at 10:58

0

vertical-align css property aligning your tags vertically so simply use :

label,div,span{
    vertical-align :middle
}

DEMO

answered Sep 23 '13 at 10:58

Shirin Abdolahi

1,047
8
18

Thanks, like with @Stephen I'll give this one a try – Jacques Sep 23 '13 at 14:02

vertical alignment for Label, DIV and Span in HTML

6 Answers6