Question

我试图将浮动元素相对于其父元素垂直居中。这是我的css：

.custom{
    float:left;
    padding:0px 4px;
    color:yellow;
    border-style:solid;
    border-width:1px;
}

.anchor{
    clear:left;
    padding:10px 0px;
    position:relative;
    color:red;
    border-style:solid;
    border-width:1px;
}

.clearfix:after {
   display:table-cell;
   vertical-align:middle;
   content: " ";
   display: block;
   height: 0;
   clear: both;
}

.vcenter{
    color:blue;
    border-style:solid;
    border-width:1px;
}

这是一个（更新的）小提琴：http://jsfiddle.net/6TVGb/5/

理想情况下，我想垂直居中蓝色元素（小提琴上的家园豁免，css中的vcenter）相对于红色元素（css中的锚点）。

修复/硬编码任何高度都是不可能的，这使得解决方案很难找到。

Answer 1

您可以使用table和table-cell。使用.clearfix div作为包装器，然后将.clearfix内的每个div与另一个包含类.cell的div包装起来。将.clearfix设置为display:table;并将.cell设置为display:table-cell;vertical-align:middle;。同时删除.clearfix:after规则集

jsFiddle

的CSS：

.clearfix {
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}

HTML：

<div class='clearfix'>
    <div class="cell">
        <div class='custom vcenter'>Primary Land Use
        </div>
    </div>
    <div class="cell">
        <div class='custom'>
             <input type- 'text'/>
               <br/>
             <select data-bind="options: $$availabledt$0000000002, optionsText: 'name', selectedOptions: $dt$0000000002"></select>&nbsp;&nbsp;<i></i>&nbsp;&nbsp;
        </div>
    </div>
    <div class="cell">
         <div class='vcenter custom'>&nbsp;&nbsp;<i></i>&nbsp;&nbsp;
         </div>
    </div>
</div>

垂直中心浮动元素与父母相关

1 个答案: