码迷,mamicode.com
首页 > 其他好文 > 详细

图片垂直居中、水平居中

时间:2018-12-15 11:48:10      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:pos   居中   ali   ext   最简   margin   设定   vertica   背景   

图片水平垂直居中情况很多,最简单的办法是吧图片设置为背景,给背景设置background-position:center;

如果只能用图片的话:

1.图片宽高固定,这种情况很简单。
水平居中:就在图片的css中加 dispaly:block;margin:0 auto;
垂直居中:自己算出(div的高度-图片的高度),得到margin-top值即可。

2.给div设定text-align:center;可使图片水平居中;

再给图片img设定 vertical-align:middle;即可达到垂直居中(是给图片加不是给外面的div加 ,不要记错哦!)

图片垂直居中、水平居中

标签:pos   居中   ali   ext   最简   margin   设定   vertica   背景   

原文地址:https://www.cnblogs.com/niu19981114/p/10122502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!