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

一切都很好——标签包装器类中的文本垂直居中。

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

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

我已经尝试了很多排列组合 - 有人知道如何实现吗？

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>