![](/img/trans.png)
[英]How to vertically center images of dynamic height inside a div of fixed height?
[英]how to vertically center a div of variable height in a fixed height div
我正在尝试创建产品Image div,我已经尝试了几乎所有方法,但仍然无法解决一个小问题,我想将Image垂直居中放置在固定高度的框中,所有新产品中的图像尺寸都会有所不同。 这是我的代码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
verical-align:middle; display:table
和table-cell
可能是我以某种错误的方式使用它们...请帮助我:(
要在固定高度的父元素中垂直居中放置元素,请设置其vertical-align: middle
。 添加显示为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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.