выравнивать текст по вертикали в 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>