.box{ display:" /> 使用CSS3伸缩盒实现图片垂直居中_HTML5+CSS3_DIV+CSS教程_一流素材网 七夕节发红包多少合适
新零售商城 快打包

使用CSS3伸缩盒实现图片垂直居中

所属栏目:HTML5+CSS3 时间:2017-02-18 来源:网络 作者:不详 点击:

用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中。

代码如下:


????
.box{
????display:?flex;????/*容器为伸缩盒*/
????align-items:?center;??/*纵轴方向上的对齐方式设置为居中*/
}
img{
????width:?100%;
}

以上是新版伸缩盒实现的,支持安卓4.4+,如果需要兼容安卓4.4-,需要再另外添加旧伸缩盒,如下:

.box{
????display:?-webkit-box;????/*容器为旧伸缩盒*/
????-webkit-box-align:?center;?/*设置旧伸缩盒对齐方式*/
  
????display:?flex;????????????/*容器为伸缩盒*/
????align-items:?center;??/*纵轴方向上的对齐方式设置为居中*/
}
img{
????width:?100%;
}


请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: