Align text vertically in Div

Question

I have some html in the following structure:

<div class="input-control">
    <div class="label-wrapper"></div>
    <div class="input-wrapper"></div>
</div>

And CSS:

.input-control
{
    height:40px;
    overflow:hidden;
    width:100%
}

.label-wrapper,
.input-wrapper
{
    display:inline-block;
    margin-right:-3px;
    vertical-align:middle;
}

.label-wrapper
{
    width:160px;
}

All is good - as you the text in the label-wrapper class is vertically centered.

However, what I want to do is make it so that label-wrapper and input-wrapper are floated, left and right respectively.

When I apply a float, I then lose the vertical alignment of the text.

I've tried loads of permutations - anyone know how to achieve this?

Or you can use this: http://stackoverflow.com/a/7052088/2329464 — drip, Feb 20 '14 at 10:45
@Vucko - its a great effort and does work, but absolute positioning may prove restrictive. — dotnetnoob, Feb 20 '14 at 10:48
@dotnetnoob how about using `line-height` - [JSFiddle](http://jsfiddle.net/22buQ/5/)? — Vucko, Feb 20 '14 at 10:55
@dotnetnoob so add `text-align:center` - [JSFiddle](http://jsfiddle.net/22buQ/6/) — Vucko, Feb 20 '14 at 11:07

Nico O · Accepted Answer · 2014-02-20T11:05:21.387

Good

The more clean solution would be this: http://jsfiddle.net/es4Ca/ i think.

.input-control
{
    padding: 20px 0px;
    overflow:hidden;
    width:100%
}

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

.label-wrapper
{
    width:160px;
}

.input-wrapper
{
    width: calc(100% - 164px);
    text-align: right;
}

Complicated and not so clean

Here is one overly complicated solution: http://jsfiddle.net/jHd3J/3/

.input-control
{
    overflow:hidden;
    display: table;
    width: 100%;
    /*change this...*/
    height: 300px;
}

.inner-input
{
    vertical-align: middle;
    display: table-cell;
    width: 100%;
}


.input-wrapper
{
  margin-left: 160px;
  width: calc(100% - 160px);
  text-align: right;
}

.label-wrapper
{
    width:160px;
    float: left;
}

With this HTML:

<div class="input-control">
    <div class="inner-input">
        <div class="label-wrapper">
            <label>Hahah</label>
        </div>
        <div class="input-wrapper">
            <input type="text" />
        </div>
    </div>
</div>

Align text vertically in Div

1 Answers1