淘先锋技术网

首页 1 2 3 4 5 6 7

CSS可以很方便的控制图片的位置,这让我们的页面在美观性和可读性上都能得到提升。下面是一些常用的方法。

/*水平居中*/
img{
display: block;
margin: auto;
}
/*左对齐*/
img{
float: left;
margin-right: 10px;
}
/*右对齐*/
img{
float: right;
margin-left: 10px;
}
/*绝对定位*/
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*相对定位*/
.container{
position: relative;
}
.container img{
position: absolute;
top: 0;
left: 0;
}
/*居中垂直对齐*/
.container{
display: flex;
justify-content: center;
align-items: center;
}
.container img{
max-width: 100%;
max-height: 100%;
}

以上就是常用的图片位置控制方法。我们可以根据实际需求选择适合自己的方法,让我们的页面更加美观、舒适。