虽然我已经阅读了很多试图调整我的图像大小的帖子,但它不起作用,有人可以帮助我将图像居中并缩小吗?
HTML:
<div id="mainBody">
<div id="image">
<img src="http://s10.postimg.org/6b22cnbfd/jpg">
</div>
CSS:
.mainBody{
width: 100%;
margin-right: auto;
margin-left: auto;}
.image {
width: 60%;
position: fixed;
align-items: center;}
.image img{
position: fixed;
display:block;
margin-left: auto;
margin-right: auto;
vertical-align: middle;}
'
最佳答案
它没有居中,因为它的位置设置为固定的。 margin: 0 auto
不适用于固定位置元素。您必须将 left
设置为 50%,然后使用负 margin-left
将其拉回宽度的一半。例如:
img {
position:fixed;
width:300px;
left:50%;
margin-left:-150px;
}
关于HTML 图片调整大小和居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32642909/