我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是,我不想保持图像响应,我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。
下面是我的代码:
HTML:
<div class="slider"><img class="center" src="images/mySlide.jpg" /></div>
CSS:
.slider{
width: 100%;
position: relative;
}
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
最佳答案
你可以像这样居中任何图像:
http://jsfiddle.net/NicoO/y5vh3/2/
.slider {
width: 100%;
position: relative;
text-align: center;
height: 400px;
}
.slider:before
{
height: inherit;
display: inline-block;
vertical-align: middle;
content:"";
}
.center {
display: inline-block;
margin: auto;
vertical-align: middle;
}
使用这样的 HTML:
<div class="slider">
<img class="center" src="http://www.placehold.it/100x40" />
</div>
关于jquery - 位于 div 中心的图像未知高度宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22427173/