当前位置:首页 > 网站维护 > 列表

img图片在div里垂直居中代码

来源:浦一科技点击:时间:2017-7-29 关键词:上海网页设计 上海网站制作
图片在div里水平居中是非常简单的,但是在垂直居中方面就不是那么容易了,img图片在div里垂直居中的最佳解决方案,使用Flexbox来垂直居中图片。方法一:将display设置成table-cell,然后水平居中设置text-align为center,垂直居
img图片在div里垂直居中代码

图片在div里水平居中是非常简单的,但是在垂直居中方面就不是那么容易了,img图片在div里垂直居中的最佳解决方案,使用Flexbox来垂直居中图片。

方法一:将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。

div{width:150px;height: 100px;display: table-cell;vertical-align: middle;text-align: center}

img {width: 50px;height: 50px;}

方法二:通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

div{width:150px;height: 100px;position: relative;}

img {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;

margin-top: -25px; /* 高度的一半 */

margin-left: -25px; /* 宽度的一半 */

}

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

预约建站
免费提供网站优化
领取关键词