元素容器内垂直居中问题

yiminghe

浏览: 1431699 次
性别:
来自: 上海

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

xhtml / css

IE XP 浏览器 CSS Safari

以前这个问题也一直出现过，因为不是什么大问题，就用table随便搞搞

html ,body {height:100%}  

<table height='100%' align="center"   valign="center">
   			<tr>
   				<td><div id='content'></div></td>
   			</tr>   			
</table>

注意： html ,body {height:100%} 一定要写，使得 table 的参考对象 height 得到窗体的高度，这样 table 中td 的内容才能在窗体范围内居中。

详见： html body 100% 解析和应用

现在越来越注意css 了，想用css实现一下，自己一试，还真难，汗，ff行了，ie就不行，一找，原来真的挺难：垂直居中问题解释整理

以下为转载

1. 单行文字在固定高度容器中垂直居中

这个最简单，只要让行间距 line-height 与容器高度 height 相等即可；

#box { height: 120px; line-height: 120px; overflow: hidden }

2. 多行文字在未知高度容器中垂直居中

这个也很简单，将 padding-top 与 padding-bottom 设置成相同的值即可；

#box2 { padding: 10px 0 }

3. 多行文字在固定高度容器中垂直居中（非 IE 浏览器）

#box3_wrapper {
   display: table;
   height: 311px;
   background: #eee
}
#box3 {
   display: table-cell;
   vertical-align: middle
}

<div id="box3_wrapper">
   <div id="box3">
        作者：shimano<br />
        如何既给用户提供最大限度的编辑权限<br />
        又能保证网页整体的规范和美观？<br />
        真 TMD 难啊！
   <div>
</div>

注意：这其中有个关于字号的问题，在 XP 和 Vista 及 Mac 下即使设定了像素为单位的字号，文字大小也依旧不同，这个在我之前一个篇日志里也提到过，在 XP 下，12px 宋体是 11x11(px)的，在 Vista 下有些文字高 11px 有些高 12px，这也是为什么 Vista 下的宋体看起来比较奇怪，Mac 下默认就是平滑边缘的黑体，再有就是 safari 下平滑边缘的宋体，所以更不容易辨别。

如果细究，在不设定高度和行间距的容器中，12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距，XP 的 IE6 下，字下沿有 3px ，字上沿为 0；Firefox 下，字上沿为 1px，下沿为2px；Vista 下，文字上下各 1px 间距（考虑同等高度文字）；这可以理解为默认 line-height，在这篇日志中我也是遇到了同样的问题。

关于 IE6 下 line-height 的问题我在这篇日志中有提。

4. 多行文字在固定高度容器中垂直居中（IE 浏览器）

因为 IE 不支持将 div 显示为 table 及其同胞，所以我们要另想办法：

#box3_wrapper {
   position: relative;
}
#box3_inner {
   position: absolute;
   top: 50%
}
#box3 {
   position: relative;
   top: -50%;
   background: #eee
}

<div id="box3_wrapper">
   <div id="box3_inner">
      <div id="box3">
         这种方法<br />
         在下面的未知高度 div 垂直居中<br />
         也用到了
      </div>
   </div>
</div>

下面有个权衡 IE 与非 IE 浏览器浏览效果的实现方法，请继续看

5. 未知高度 div 的垂直居中

#box4_wrapper {
   height: 100%;
   width: 100%;
   overflow: hidden;
   position: relative
}
#box4_wrapper[id] {
   display: table;
   position: static
}
#box4_outer {
   position: absolute;
   top: 50%
}
#box4_outer[id] {
   display: table-cell;
   vertical-align: middle;
   position: static
}
#box4_inner {
   position: relative;
   top: -50%;
   margin: 0 auto;
   background: #eee
}

<div id="box4_wrapper">
   <div id="box4_outer">
      <div id="box4_inner">
         这是一种无 hack 的方式<br />
         虽然环保，但是臃肿:(
      </div>
   </div>
</div>

CSS2 选择符 #value[id] 相当于 #value，但是 IE 不支持这种类型的选择符，使用这种方式区分浏览器避免 hack:)

6. 未知尺寸图片（小与容器高度）在固定高度容器中垂直居中

#box5 {
   display: table-cell;
   *display: block;
   *font-size: 175px;
   *font-family: Arial;
   vertical-align: middle;
   height: 200px;
   width: 200px
}
#box5 img {
   vertical-align: middle
}

<div id="box5">
   <img src="img/ctba.png" alt="扯谈社" />
</div>

方法2：找一张图片 1*1 ,高度设为 div 的高度，待居中图片紧随其后，这样的话由于行内元素基于中线对其，则待居中图片垂直居中了，至于水平居中则用 div {text-align:center}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Vertical Middle</title>
<style>
.itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;}
.blank{width:0;height:160px;}
.itm img{vertical-align:middle;}
</style>
</head>

<body>
<div class="itm">
<img src="blank.gif" class="blank" />
<a href=""><img src="m060616.jpg"/></a>
</div>
</body>
</html>

淘宝 UED 07 前端开发原题。解释下针对 IE 的 hack：在 IE 下，将字号设置为容器高度的 0.873（本例中即 200*0.873 = 175）图片便会垂直居中；字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题，如 gbk 编码（摘自译飞的博客）

当然如果只是图片，在针对非 IE 浏览器时利用单行文字的垂直居中方法也可以。

vertical测试.rar (5.8 KB)
下载次数: 23

分享到：

Extjs 模块化动态加载js实践 | Extjs 聊天窗口 -续3 用pushlet来实现

2009-01-08 14:44
浏览 4696
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论