在Div中垂直对齐文本

Question

我在以下结构中有一些html：

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

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

一切都很好 - 因为标签包装类中的文本是垂直居中的。

但是，我想要做的是使标签包装器和输入包装器分别浮动，左右。

当我应用浮动时，我失去了文本的垂直对齐方式。

我尝试了大量的排列 - 有谁知道如何实现这个目标？

Answer 1

不可

更清洁的解决方案是：http://jsfiddle.net/es4Ca/我认为。

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

复杂而不那么干净

这是一个过于复杂的解决方案：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;
}

使用此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>