淘先锋技术网

首页 1 2 3 4 5 6 7

CSS图像剧中非常常见,下面将为大家介绍一些常用的实现方式。

img{
display:block; /* 将图片转化为块级元素 */
margin:auto; /* 设置边距为自动,使其水平居中 */
}

上述代码适用于只需要水平居中的情况,如果需要垂直居中,可以使用以下代码。

.container{
position:relative; /* 定位容器 */
}
img{
position:absolute; /* 定位图片 */
top:50%; /* 顶部距离为50% */
left:50%; /* 左侧距离为50% */
transform:translate(-50%, -50%); /* 偏移值为图片宽高的50% */
}

如果需要兼容IE9及以下版本,可以使用以下代码。

.container{
display:table-cell;
text-align:center;
vertical-align:middle;
}
img{
display:inline-block;
}

以上是CSS实现图片剧中的常规方法,可以根据自己的需要选择方法。