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