css图片居中,通过纯css实现图片居中的多种实现方法

时间: 2017-11-02阅读: 1911标签: 居中

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结:

html结构:

<div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">
	<img src="default.jpg" width="400" height="300"/>
</div>

实现img位于外层div的居中显示,网上有很多在img外层嵌各式各样的span、div、li等等,以便于使用 text-align来进行居中,当然我们不推荐嵌套多层。

方法一:

.demo img{
	display: block;
	margin:150px auto;
}

思路:<img>标签是属于内联元素,内联元素是不支持 Margin 属性,通过 Display 属性将img强制为块元素的方式显示,便可在图文混排中使得图片可以居中。  

方法二:

.demo{
	text-align: center;
}
.demo img{
	margin-top:150px;
}

思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。  

方法三:

.demo img{
	padding:150px 200px;
}

思路: 只用padding属性,通过计算求得居中

 方式四:

.demo{
	display:table-cell; text-align:center; vertical-align:middle;
}
.demo img{
	vertical-align: middle;
}

思路:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,使用它可以让大小不固定元素垂直居中。只是它比上面方法优势。

方法五:

.demo{
	position: relative;
}
.demo img{
	position: absolute;top:150px;left:200px;
}

思路:通过相对,绝对定义,计算偏移量实现居中

方法六:

.demo{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

思路:实现css6的flex属性,很简单的实现了居中显示,但是推荐使用于web App,低版本浏览器存在一定兼容问题,好处和方法五一样。

方法七:

嘿嘿,方法还有很多,留点给大家留言发表哦..................


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/47

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。

小程序scroll-view点击项自动居中

我们想要的是居中的效果,所以触发滚动的条件是点scroll-view宽度一半之后的项才开始滚动,所以需要减去宽度的一半,offsetLeft为相对于scroll-view总长度的X轴距离,只要相减计算后的数值为正数,就可以证明上面的条件,触发滚动

设置 letter-spacing 后文字不能居中的解决方法

今天才发现,给文字设置 letter-spacing 再设置 text-align: center; ,文字会整体往左偏移,不能居中。 给文字嵌套了一个 span 标签,再选择文字可以看出,letter-spacing 给每个字的右边都加了一个间距。

CSS 不定宽高的垂直水平居中方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错

CSS中实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意,而是有其现实的原因

css垂直居中的几种实现方式

相比较水平居中,垂直居中比较复杂点。尤其是在实际页面中,有很多特殊的场景,导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

div元素宽度不定的情况下如何居中显示

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后

css样式——完美解决div水平居中及div水平垂直居中的方法总结

在我们网页开布局中,经常遇到div元素的垂直居中或者水平居中。这篇文章,我总结一下

如何让子元素在父元素中水平垂直居中七种方法?

第一种:定位+margin:auto,注意:兼容性较好,缺点:不支持IE7以下的浏览器.第二种:定位+margin-left+margin-top注意:兼容性好;缺点:必须知道元素的宽高,第三种:定位+transfrom

css中line-height的理解_介绍line-height实际应用

css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素。line-height实际应用:图片水平垂直居中、多行文本水平垂直居中、用line-height代替height

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广