CSS控制垂直水平居中(固定容器高度) | Heluyao's Blog

博客 - html/css/xml/xsl

CSS控制垂直水平居中(固定容器高度)

　　其实也没什么，主要还是利用hack修复IE6以及更低版本的不支持。

　　这个例子需要固定容器的高度（已知外框高度），但中间内容可以任意高度。这里以图片来做内容。以下是方法一：

　　看代码：

<div class=”div”>
<p><img src=”zxz.jpg”></p>
</div>
.div { display:table-cell; vertical-align:middle; border:1px solid #000; width:100px; height:200px; _position:relative;}
.div p { _position:absolute; _top:50%; width:100%; text-align:center;}
.div p img { _position:relative; _top:-50%;}

　　能兼容FF,IE6,Opera,还是非常不错的，其实要实现此效果，方法有多种。下面再说一种更科学的方法：

　　方法二：

<div class=”box”>
<img src=”img src=”zxz.jpg” />
</div>
.box { display: table-cell; ertical-align:middle; text-align:center; width:100px; *display: block; *font-size: 175px;/*约为高度的0.873，00*0.873 约为175*/ *font-family:Arial;/*为防非utf-8编码引起的hack失效*/ width:200px; height:200px; border: 1px solid #eee;}
.box img { /*设置图片垂直居中*/ vertical-align:middle;}

　　可以减少一个没意义的标签，是不是科学很多哦！

相关文章

标签：CSS

这篇文章发表于2008年06月3日，下午，2:36，归类于html/css/xml/xsl。您可以通过订阅RSS 2.0跟踪对这篇文章的评论，也可以发表您的评论，或者从您的站点trackback。

写下您的看法