注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

背归鸿

博闻强记,厚积薄发!

 
 
 

日志

 
 

CSS实现完美垂直居中  

2012-09-21 16:55:10|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-heightheight,并使两值相等,再加上 over-flow: hidden 就可以了

.middle-demo-1{
        height: 4em;
        line-height: 4em;
        overflow: hidden;
}

优点:
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点:
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是:
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话,overflow: hidden 一定要

二、多行内容居中,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
      padding-top: 24px;
      padding-bottom: 24px;
}

优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度

  评论这张
 
阅读(169)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018