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

图片垂直水平居中

时间:2017-03-07 19:14:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:效果   block   bsp   前端   元素   居中   lin   行内元素   splay   

前端布局,垂直水平居中是经常遇到的一个场景。水平居中较为容易,垂直居中则需变通处理,特别是图片的居中。

 

  • 行内元素居中, 包括文本,图片,表单元素等,display属性为inline的元素

水平居中原理: text-align:center 实现水平居中

垂直居中原理:利用 line-height 等于 height

  • 块元素居中,display属性为block的元素

水平居中原理:利用 margin:0 auto 实现

垂直居中原理:利用 vertical-align 实现垂直居中,决定行高的是行内最高的元素的值

 

下面贴出的代码为块元素居中代码,行内元素比较简单不做演示。

css:

.box {  
    /*设置水平居中*/ 
    text-align:center; 
    width:500px; 
    height:500px; 
    border: 1px solid #eee; 
} 
.box span{
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.box img { 
    /*设置图片垂直居中*/ 
    vertical-align:middle;
    width:80%;
    height:80%; 
} 

html布局:

<div class="box" > 
    <span></span>
    <img src="images/10/7.png"> 
</div>

效果图片:

  技术分享

图片垂直水平居中

标签:效果   block   bsp   前端   元素   居中   lin   行内元素   splay   

原文地址:http://www.cnblogs.com/jinxiudaxin/p/6516044.html

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