css如何让img垂直居中
img垂直居中方法有很多,其中就包括以下三种方法
1.使用flex让img垂直居中
在css中,我们可以使用flex去实现垂直居中,但是flex并不是一个很好的方法,现在很多浏览器并不支持flex,例如IE8,9。
首先我们要先给托图片添加一个div,并且定义为宽度为100px,高度也是100px,并且给它定义一些基本的属性,其中我们把div中的display元素设置成flex,然后把另外一条添加align-items: center属性。
css代码:
body{ background:#999} .flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center} .flexbox img{width: 100px;height: 100px;align-items: center;}
2.使用display去实现img垂直居中
首先我们要是先创建一个div,以及对有图片的div设置样式,我们可以给img的父级添加一个diaplay,并且属性为table,并且把包含图片的div中的display属性设置成table-cell,其实实现居中我们要做的就是给有图片的div设置成vertical-align: middle;属性就可以了。
css代码:
.tablebox{width: 300px;height: 250px;background: #fff;display: table} #imgbox{display: table-cell;vertical-align: middle;} #imgbox img{width: 100px}
3.利用图片的绝对定位去实现
我们把有图片的div设置有背景的,并且给img的父元素添加相对属性,并且给子元素添加绝对和相对属性,还要把top的值设置成50%,现在要做的就是给img元素设置成一个负margin-top值。
css代码:
body{background: #ccc;} .posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto} .posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
以上三种方法我们推荐使用第三种,第三种的兼容性比较好,方法比较简单,重点是掌握方法和原理。
以上就是对css如何让img垂直居中的全部介绍,如果你想了解更多有关CSS3教程,请关注。
以上就是css如何让img垂直居中的详细内容,更多请关注其它相关文章!
上一篇: php如何修改session的属性值?
下一篇: 修改php.ini配置文件无效怎么办?
推荐阅读
-
如何让字符串(数字和字母)这样竖着显示_html/css_WEB-ITnose
-
CSS制作图片水平垂直居中_html/css_WEB-ITnose
-
css垂直居中的几种方式_html/css_WEB-ITnose
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
css5种实现垂直居中_html/css_WEB-ITnose
-
如何让整个div实现超链接(得用标签)_html/css_WEB-ITnose
-
如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
-
css图片响应式+垂直水平居中2_html/css_WEB-ITnose
-
让input文本框文本垂直居中代码实例_html/css_WEB-ITnose
-
css定位练习“十字架“之水平垂直居中_html/css_WEB-ITnose