1

我想在右 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/

4

3 回答 3

2

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

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

演示

另一种解决方案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
}

演示 2

于 2013-03-04T09:14:27.410 回答
1

如果您知道左侧 div 的高度（例如 50 像素），您可以设置一个相对于包装容器和左侧 div 的位置：然后将顶部位置设置为左侧 div 的 50%，margin-top 等于减号高度的 50%。

例如。

.wrapper{
    ...
    position:relative;
}

.left{
    ...
    position:relative;
    height:50px;
    top:50%;
    margin-top:-25px;
}
于 2013-03-04T09:02:14.187 回答
0

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

于 2013-03-04T09:05:42.933 回答