0

我正在尝试创建一个产品图像 div，我已经尝试了几乎所有方法，仍然无法解决一个小问题，我只想将我的图像垂直居中在一个固定高度的框中，图像的大小在每个新产品图像中都会有所不同. 这是我的代码 HTML：

<div class="main-pic">
 <ul>
     <li><img src="images/extra/laptop.jpg"></li>
     <li><img src="images/extra/laptop1.jpg"></li>
     <li><img src="images/extra/laptop2.jpg"></li>
     <li><img src="images/extra/laptop3.jpg"></li>
     <li><img src="images/extra/laptop4.jpg"></li>
     <li><img src="images/extra/laptop5.jpg"></li>
 </ul>
</div>

CSS：

.main-pic{width:430px;height:430px;border:1px solid black;margin:20px auto;display:block;float:none;overflow:hidden;}
.main-pic ul{width:10000px;}
.main-pic ul li{width:430px;height:430px;float:none;display:block;margin:-25% auto auto;position:relative;top:50%;}
.main-pic ul li img{max-width: 400px;height:auto;max-height: 400px;width: auto;}

仅供参考，我已经尝试过verical-align:middle; display:table，table-cell 可能是我一直在以错误的方式使用它们......请帮助我:(

4

1 回答 1

0

要在固定高度的父元素中垂直居中元素，请将它们的vertical-align: middle. 添加一个显示为 an 的附加元素，其高度inline-block为零width且全高。

示例 HTML：

<div class="container">
    <div class="height"></div>
    <img ...>
    <img ...>
</div>

示例 CSS：

.container {
    height: 300px;
}
.height {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}
.container > img {
    vertical-align: middle;
}

JS Bin演示

如果您知道容器的高度，您也可以将其设置line-height为相同的值，而不是使用div.height.

于 2013-03-04T16:13:15.687 回答