提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > css怎样让img垂直居中【html5教程】,css,img,垂直居中

css怎样让img居中显现?img垂直居中要领?关于方才css入门的新手能够还不是很熟悉,下面我们来总结一下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教程,请关注ki4网。

以上就是css怎样让img垂直居中的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css怎样让img垂直居中【html5教程】,css,img,垂直居中"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线