Question

我想在右边div的中间垂直对齐一个左div。我可以使用display:table-cell;执行此操作，但之后我无法使用float:left

以下是我正在尝试的内容：

HTML：

<div class="wrapper">
    <div class="left"><h1><a href="#"><img src ="img.png" /></a></h1></div>
    <div class="right">Right</div>
</div>

CSS：

.wrapper{
    overflow: hidden;
    border: 1px solid blue;    
    width: 400px;
}

.left{
    border: 1px solid red;   
    max-width: 200px; 
    max-height: 50px;
    float: left;   
    overflow: hidden;
    display:table-cell;
    vertical-align:middle;
}

img{
    display: block;
}

.right{
    width: 200px;
    height: 200px;
    float: right;
    border: 1px solid green;    
}

演示： http://jsfiddle.net/fmpLt/

Answer 1

虽然我不清楚你的期望，但我尝试了下面的代码。检查它是否可以帮助你

将display:table添加到.wrapper然后table-cell添加到.left

<强> DEMO

position:absolute

的另一种解决方案

.wrapper{
    overflow: hidden;
    border: 1px solid blue;    
    width: 400px;
   position:relative; background:yellow
}

.left{
    border: 1px solid red;   
    max-width: 200px; 
    max-height: 50px;
    overflow: hidden;   
    position:absolute;
    top:50%; margin-top:-25px
}

<强> DEMO 2

Answer 2

如果你知道左边的div高度（例如50px），你可以设置一个位置：相对于包装容器和左边的div，然后设置一个50％的顶部位置到左边div，边缘为top等于零下50％的高度。

例如

.wrapper{
    ...
    position:relative;
}

.left{
    ...
    position:relative;
    height:50px;
    top:50%;
    margin-top:-25px;
}

Answer 3

您可以将margin-top设置为.right高度的一半，减去图像高度的一半。在这种情况下，那将是margin-top: 68px。

垂直对齐div

3 个答案: