我有一些 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 时,我失去了文本的垂直对齐方式。
我已经尝试了很多排列组合 - 有人知道如何实现吗?
最佳答案
好
更干净的解决方案是: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>
关于css - 在 Div 中垂直对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21905226/