在 Div 中垂直对齐文本答案

【问题标题】：Align text vertically in Div在 Div 中垂直对齐文本
【发布时间】：2014-02-20 10:39:46
【问题描述】：

我有一些 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;
}

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

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

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

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

【问题讨论】：

会this suit?
或者你可以使用这个：stackoverflow.com/a/7052088/2329464
@drip - 我正在专门寻找垂直对齐方式
@Vucko - 这是一项巨大的努力并且确实有效，但绝对定位可能会受到限制。
@dotnetnoob 使用line-height - JSFiddle 怎么样？

标签： css

【解决方案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>

【讨论】：