對齊文本垂直的事業部

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>