div+css实现Firefox和IE6兼容的垂直居中

原创 2007年09月22日 09:04:00

div+css实现Firefox和IE6兼容的垂直居中

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中,还需要 借助于!important标记。Firefox支持!important标记,而IE6忽略!important标记,因此可以使用! important标记区别Firefox和IE6。

[示例代码]

<html>
    <body>
        <div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
            <p>垂直居中,Firefox only</p>
            <p>垂直居中,Firefox only</p>
            <p>垂直居中,Firefox only</p>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative;">
             <div style="position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中,IE6 only</p>
                     <p>垂直居中,IE6 only</p>
                     <p>垂直居中,IE6 only</p>
                 </div>
             </div>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
             <div style="position: static !important; position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中,Firefox IE6 only</p>
                     <p>垂直居中,Firefox IE6 only</p>
                     <p>垂直居中,Firefox IE6 only</p>
                 </div>
             </div>
        </div>
    </body>
</html>

[div+css关键词]

div css

[div+css重要工具]

Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&amp;displaylang=en

[div+css的浏览器兼容问题]

水平居中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中,Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记,Firefox支持!important标记,IE6忽略!important标记
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。 举报

相关文章推荐

div+css实现Firefox和IE6/7兼容的垂直居中

Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6/7中则需要借助IE6/7中css的特点实现垂直居中。为了实...
  • wzhiu
  • wzhiu
  • 2013-02-28 17:38
  • 1510

IE8中实现垂直居中(兼容IE6、IE7、IE8,Firefox,Chrome等)

投票情况统计:

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

css实现div内容垂直居中

如何用CSS实现DIV内容垂直居中 作者:adobe-dr…    教程来源:adobe-dreamweaver.cn    点击数:4302    更新时间:200...

css实现图片垂直居中(兼容IE6/IE7)

图片垂直居中兼容ie系列 优劣对比: 1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome 优点:不添加任何多余标签,兼容主流浏览器 缺点:需要...

css实现div水平、垂直居中

示例1: /* 固定宽高div,在浏览器中保持水平、垂直居中 */ #div1 { width:400px; height:300px; position:absolute;...

css实现div垂直水平居中

一、表格布局法 table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-alig...

DIV+CSS--IE6,IE7,IE8,Firefox兼容的(转)

转载自 虫的传人 最终编辑 虫的传人 IE6,IE7,IE8,Firefox 兼容的css hack 补充: .color{ background-color: #C...

CSS实现垂直居中的几种方法

最近上网上找了些关于CSS实现垂直居中的方法,方法挺多,下面就我看到的几种好方法在这里说明一下,使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效,因此,到底选择哪种方法好,还要看具体情况...

DIV+CSS--IE6,IE7,IE8,Firefox兼容的

IE6,IE7,IE8,Firefox 兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ backgrou...

css垂直居中--div

面试到css的时候,人们经常会问给你一个div固定宽度. Document .container{ position: relative; width: 400p...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)