css - 使用 float 时使元素居中

Question

我尝试使用 float 制作 2 列。左栏有短文本，另一栏是长文本 like

<div class="boxes">
    <div class="box1">short text</div>
    <div class="box2">This is a long text This is a long text This is a long text <br> This is a long text <br> This is a long text <br></div>
    <div class="clear"></div>
</div>
.box1 {
    float:left;
}
.box2 {
    float:left;
    width: 50%;
}
.clear {
    clear:both;
}

之前是

我试着让它变成

但是当 box2 有动态长文本时，我不能让 box1 位于中间。那可能吗？怎么做。谢谢。

Answer 1

如果这适合你，你可以用 display:inline-block

将您的 css 更改为:

.box1 {
    //float:left;
    display:inline-block;
    vertical-align:middle;
}
.box2 {
    //float:left;
    width: 50%;
     display:inline-block;
    vertical-align:middle;
}

请看这里:http://jsfiddle.net/Jr9Fp/

或者您可以在父级上使用 display:table，在子级上使用 display:table-cell，如下所示:

.boxes{
    display:table;
    background:#ccc;
}

.box1 {
    //float:left;
    display:table-cell;
    vertical-align:middle;
    background:red;
    height:100%;
}
.box2 {
    float:left;
    width: 50%;
    display:table-cell;
   // vertical-align:middle;
}

http://jsfiddle.net/Jr9Fp/1/