网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.DIV+CSS与XHTML+CSS是什么意思?.
.巧用CSS的Border属性.
.XHTML头部Doctype声明必不可少!.
.CSS创建圆角框.
.如何用CSS让文字居于div的底部.
.使用纯 CSS 设计3D按钮.
.css 背景图片的定位问题.
.CSS技巧整理共25条.
.彻底弄懂CSS盒子模式(DIV布局快速.
.CSS定义超链接四个状态的正常顺序.
.稀为人知的几个有用的Css技巧.
.css控制div置顶置底的例子.
.CSS:清除浮动的最优方法.
.css代码格式化清理工具.
.CSS教程:表格的nobr终极解决方案.
.Mozilla Firefox 建议的CSS书写顺.
.用css使单行超出指定宽度的内容切.
.CSS制作圆角导航的另一思路.
.全面了解CSS内置颜色(color)值.
.用CSS层叠样式表实现文字变图象特.

CSS定高多行垂直居中

发表日期:2008-10-7


用Table布局可以很容易的实现文字和图片的垂直居中,但是在div的布局中呢,要实现定高容器里面的内容的垂直居中不是太简单的事情。

在DOM标准中

在IE中

综合

#boxOuter
{
    display:table;
    height:300px;
    width:500px;
    border:solid 1px black;
    *position:relative;
}
#box
{
    display:table-cell;
    vertical-align:middle;
    *position:absolute;
    top:50%;
    width:100%;
}
#boxInner
{
    *position:relative;
    width:100%;
    top:-50%;
}
 

<div id="boxOuter">
    <div id="box">
        <div id="boxInner">
            <p>Some Content Here</p>
            <p>Some Content Here</p>
            <p>Some Content Here</p>
            <p>Some Content Here</p>
            <p>Some Content Here</p>
        </div>
    </div>
</div>

上一篇:使用CSS设置表格 人气:992
下一篇:CSS中权重的例子 人气:677
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐