我有一个div和div内的图片,图片大小会有所不同。
我想让它水平和垂直居中。Css垂直对齐似乎不起作用。
有什么技巧吗?我可以使用php、css或Jquery
margin: 0 auto;
display: table-cell
的元素内部使用(本身应该在具有display: table
的元素中)。<div id="container"><img src="my-image.png" alt="" /></div>
var imageSrc = $('#container img').attr('src');
$('#container').css({ backgroundImage: 'url(' + imageSrc + ')', backgroundPosition: 'center enter' });
我不知道你如何使用它,所以我的解决方案可能不适用。
当您将图像作为div的“background-image”实现时,您可以轻松地使用“background-position”将其居中:
#div {
background-image: url(./image.png);
background-position: center center;
}
<style>
.image-container {
position:relative;
width:300px;
height:300px;
background:#ccc;
}
.image-container .image {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:red;
height:100px;
width:100px;
}
</style>
<div class="image-container">
<img class="image" src="****.jpg"/>
</div>