您好,欢迎来到站长资源库!分享精神,快乐你我!
设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签
焦点图全屏广告对联广告在线客服相册代码HTML/CSS滚动代码导航菜单悬浮漂浮
当前位置:首页 > 网页特效 > HTML/CSS

css图片垂直居中 让html img图片垂直居中的三种方法

浏览:38 次  |  日期:2020-02-04
 本教程为thinkcss教大家三种让img元素图片在盒子内垂直居中的方法教程,根据代码与文章教程理解掌握并加以使用。


一、使用flex实现垂直居中


利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择,因为IE8,9并不支持它。


现在,为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。


以下图片img宽度为(设置为)100px,高度为100px。


HTML代码部分:


<div class="flexbox">

<img src="1.jpg" alt="">

</div>

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;}

解释:

1、为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。

2、div元素的display属性设置为flex。

3、div添加另外一条属性align-items: center;






二、利用Display: table;实现img图片垂直居中


html代码:


<div class="tablebox">

<div id="imgbox">

<img src="1.jpg" alt="">

</div>

</div>

CSS代码:


.tablebox{width: 300px;height: 250px;background: #fff;display: table}

#imgbox{display: table-cell;vertical-align: middle;}

#imgbox img{width: 100px}

解释:

1、首先我们先要创建一个div元素以及另外一个包含图片的div元素,然后我们开始设置它的样式。

2、给img父元素设置display属性为table

3、把包裹图片的那个div元素的display属性设置为table-cell

4、为了实现垂直居中,我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性


注意:如果你也想实现水平居中,你可以给最外层的div元素添加text-align: center属性,注意不是id=”img”的div




三、用绝对定位实现垂直居中(推荐-兼容性好)


HTML代码:


<div class="posdiv">

<img src="1.jpg" alt="">

</div>

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;}

解释:

1、一张包裹在div中的img图片,我们给不光给图片以及div元素定义了尺寸,还给div元素定义了#fff的背景色(背景颜色可以根据需求设置)。

2、给img的父元素添加相对定位属性(position: relative),同时,要给子元素也就是图片img元素添加绝对定位属性(position: absolute)。

3、将图片元素的top属性设置为50%。

4、现在我们需要给img元素设置一个负的margin-top值,这个值为你想要实现垂直居中的元素高度的一半,*如果不确定元素的高度,可以不使用margin-top,而是使用transform:translateY(-50%);属性。

记住:如果你想要同时实现水平居中,那么你可以用实现垂直居中的一样的技巧来实现。


通过以上三种方法让img图片垂直居中,希望大家能掌握布局方法与原理。



TAG标签
    2009-2020 © 懒人站长资源库  版权所有
    网站首页 - 矢量素材 - 图标素材 - 网页特效 - 图库素材 - 网站教程 - 网站源码 - FLASH素材 - 常用手册 - 共享软件
    QQ服务:564316500  邮箱服务:564316500@qq.com
    皖ICP备20003381号