css图片居中的一些方法

浏览: 171次 日期:2018年06月22日 19:51:47 作者:青格勒

前端很多时候都会遇到一个需求,水平垂直居中显示,这次我就拿图片的上下左右居中做一个简单的几个例子。

其实前端做一个CSS图片居中有很多的方法,没有高低不能用的情况,只要能满足你的项目随便哪一个实现就可以。

 

一、单纯的水平居中

1、水平居中

给图片的父级加text-align:center;来水平居中,在这种情况下img不可以是块级元素。

代码:

<div class="div1"><img src="images/2.png" /></div>
<style>
    .div1{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center;}
</style>

 

2、水平居中

给图片margin:0 auto;来居中,img必须为块级元素

代码:

<div class="div2"><img src="images/2.png" /></div>
<style>
    .div2{ border:1px solid #999999; height:200px; width:300px; margin:0 auto;}
    .div2 img{ display:block; margin:0 auto;}
</style>

 

 

二、水平垂直居中

1、水平垂直居中

使用了line-height和vertical-align: middle;来图片的居中,IE7及以下不支持。

代码:

<div class="div3"><img src="images/2.png" /></div>
<style>
    .div3{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center; line-height:200px;}
    .div3 img{display: inline-block; vertical-align: middle;}
</style>

 

2、水平垂直居中

display: table-cell;属性来居中,我比较推荐这样的做法,IE7及以下不支持。

代码:

<div class="div4"><span><img src="images/2.png" /></span></div>
<style>
    .div4{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center; display: table;}
    .div4 span{display: table-cell; vertical-align: middle;}
</style>

 

3、水平垂直居中

定位来CSS水平垂直居中,IE7及以上都支持,兼容性比较好,但是不建议这么去做。

代码:

<div class="div5"><img src="images/2.png" /></div>
<style>
    .div5{ position:relative; border:1px solid #999999; height:200px; width:300px; margin:0 auto;}
    .div5 img{ position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px;}
</style>

 

4、水平垂直居中

table来css图片居中,只要给table一个高度他就自动的上下左右居中了,兼容性比较好。

代码:

<table class="div6">
    <tr>
        <td><img src="images/2.png" /></td>
    </tr>
</table>
<style>
    .div6{border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center;}
</style>

5、水平垂直居中

flex目前来说只有最新浏览器才会支持,现在在移动端使用的比较多,如果不想支持低版本的浏览器还是可以的,这个肯定是以后的趋向。

代码里面注释的为标准写法,为了多兼容我这边写了很多的带前缀的写法。

代码:

<div class="div7">
    <div class="cell">
        <div><img src="images/2.png" /></div>
    </div>
</div>
<style>
.div7 {
    border: 1px solid #999999; height: 200px; width: 300px; margin: 0 auto; text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/*
.div7 {
    border:1px solid #999999;
    height:200px;
    width:300px;
    margin:0 auto;
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: center;
    align-items: center
}
*/
</style>

 

6、水平垂直居中

利用了padding/margin来居中,给img上边距的方法去居中,这个的好处是所有浏览器(IE>6)都能支持,可以放心使用。

代码:

<div class="div8"><img src="images/2.png" /></div>
<style>
    .div8{ border:1px solid #999999; height:200px; width:300px; margin:0 auto; text-align:center;}
    .div8 img{ margin-top:50px;}
</style>

 

好了,除了这些还有很多的方法也能实现CSS图片居中,看客们有什么其他想法不妨留言哦。

文章链接:http://cenggel.com/htmlcss/106.html

版权声明:文章《css图片居中的一些方法》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

一条回应:“css图片居中的一些方法”

  1. 123说道:

    比较详细

发表评论

电子邮件地址不会被公开。 必填项已用*标注