码迷,mamicode.com
首页 > 其他好文 > 详细

图片的居中方法

时间:2015-11-27 19:34:50      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

1.水平居中、垂直的方法:

(1)图片的水平居中:a.在其父级设置text-align:center;b.在图片上设置margin: 0 auto;display: block;

图片的水平垂直居中:a.使用displaytabletable-cell;

html:

<div class="center-aligned">

  <div class="center-core">

    <img src="page_1_5.png" >

  </div>

</div>

css:

.center-aligned {

display: table;

background: hsl(120, 100%, 97%);

width: 500px;

height:500px;

}

.center-core {

display: table-cell;

text-align: center;

vertical-align: middle;

}

B.绝对定位position:absolute,left:50%,top:50%,平移transform:translate(-50%, -50%);

C.在父级使用:display: flex;justify-content: center;align-items: center;,但是会有兼容性问题,chrome,火狐支持,IE10部分支持2012,需要-ms-前缀

图片的居中方法

标签:

原文地址:http://www.cnblogs.com/juanzirosalind/p/5001123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!