对齐文本垂直的事业部

2014-02-20 46 views 0 likes

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

一切都很好 - 当你在标签，包装类的文字是垂直居中。

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

当我应用一个浮动，然后我失去了文本的垂直对齐。

我尝试了大量的组合 - 任何人都知道如何实现这一点？

来源

2014-02-20 dotnetnoob

威尔[这套衣服（HTTP ：//jsfiddle.net/22buQ/）？ – Vucko

或者你可以使用这个：http://stackoverflow.com/a/7052088/2329464 – drip

@drip - 我特别寻找垂直对齐 – dotnetnoob

回答

好

更清洁的解决办法是这样的：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>

来源

2014-02-20 10:55:00

对齐文本垂直的事业部

回答

相关问题