应用错误收集

将两个DIV并排放置，同时保持图像垂直居中

时间：2012-07-14 15:01:12

标签： css

样品：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left {display:table-cell; width:448px; height:336px; vertical-align:middle; background:black;}
#left img {display:block; margin:0 auto;}
#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}
</style>
</head>
<body>
<div id="left"><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></div>
<div id="right">
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>

如果我使用div {float:left;}，那么大图片将不再垂直居中。解决方案是什么？

2 个答案:

答案 0 :(得分：0)

我不完全确定你想要什么，但是我做了一个猜测并把它放在JS小提琴here中。我只需将两个容器设置为float:left并删除display:table-cell

希望有所帮助

答案 1 :(得分：0)

看看这是否正常：http://jsfiddle.net/vmuwZ/2/

CSS更改：

#left {display:table-cell; width:448px; height:340px; vertical-align:middle; background:black; float: left;}
#left img {display:block; margin:20px auto;}
#right {width:100px; height:330px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black; float: left;}