CODEWITHSUNDEEP
htmlcss
Jacques
Jacques

Reputation: 7135

vertical alignment for Label, DIV and Span in HTML

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?

Upvotes: 1

Views: 6868

Answers (6)

Stephen James
Stephen James

Reputation: 1287

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/

Upvotes: 1

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

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

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

DEMO

Upvotes: 0

gp.
gp.

Reputation: 8225

vertical align all elements in li to middle.

ul li *{
    vertical-align:middle;
}

Upvotes: 0

Ankit Agrawal
Ankit Agrawal

Reputation: 6124

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

Upvotes: 0

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

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;
}

Upvotes: 0

Anon
Anon

Reputation: 2874

Use inline-block property on all elements

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

http://jsfiddle.net/6vQ4Q/

Upvotes: 2

Related Questions