DIV实现垂直居中（兼容IE6、IE7、IE8，Firefox） - ++ - ITeye博客

`

accphc

浏览: 124560 次
性别:
来自: CD

最近访客更多访客>>

asd516585657

kind790

gfansenhua

isamu_ime

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

lan861698789：来看看学习下
老掉牙的话题，java的异常处理。
allenofchina：标准答案是用CheckedException业务层抛出一个通用 ...
老掉牙的话题，java的异常处理。
carlkkx： ppgunjack 写道人服务于社会，一个作为社会一员的服务方 ...
老掉牙的话题，java的异常处理。
ppgunjack：人服务于社会，一个作为社会一员的服务方的小角色正企图以服务方不 ...
老掉牙的话题，java的异常处理。
getclass：网速太慢还没看到不过精神可贵哈哈
Struts2视频

DIV实现垂直居中（兼容IE6、IE7、IE8，Firefox）

阅读更多

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>多行文字实现垂直居中 </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 12px;
                font-family: tahoma;
            }
            
            div#wrap {
                display: table;
                border: 1px solid #FF0099;
                background-color: #FFCCFF;
                width: 760px;
                height: 400px;
                *position: relative;
                overflow: hidden;
            }
            
            div#subwrap {
                vertical-align: middle;
                display: table-cell;
                *position: absolute;
                *top: 50%;
            }
            
            div#content {
                *position: relative;
                *top: -50%;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="subwrap">
                <div id="content">
                    <pre>
                     现在我们要使这段文字垂直居中显示！  
      div#wrap { 
      border:1px solid #FF0099;  
      background-color:#FFCCFF; 
      width:760px;  
      height:500px; 
      position:relative;  
      } 
      div#subwrap {  
      position:absolute; 
      border:1px solid #000;  
      top:50%; 
      }  
      div#content { 
      border:1px solid #000;  
      position:relative; 
      top:-50%;  
     }</pre>
                </div>
            </div>
        </div>
    </body>
</html>

分享到：

Java Interface | 一个简单的数据库导出Excel小工具。

2010-07-14 09:46
浏览 11908
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

div垂直居中屏幕: div垂直居中屏幕的方法，兼容IE6 7 8 Firefox

如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf: 针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器"，这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**： DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

CSS解决未知高度的DIV垂直居中: ### CSS解决未知高度的DIV垂直居中 #### 知识点概述在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...

div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf: 本文将深入探讨如何使CSS样式兼容IE6、IE7、IE8、IE9以及Firefox、Chrome等现代浏览器。 1. **DOCTYPE声明的影响**： DOCTYPE声明对于浏览器的渲染模式至关重要。在HTML文档的顶部加入正确的DOCTYPE，如`<!DOCTYPE...

(十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.pdf: 然而，不同的浏览器对CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（如IE6、IE7、IE8）与Firefox等现代浏览器。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度兼容性**...

div+css_兼容ie6_ie7_ie8_ie9和FireFox_Chrome等浏览器方法: 本文将详细介绍如何使基于div+css布局的网页在Internet Explorer（IE6, IE7, IE8, IE9）及Firefox、Chrome等现代浏览器中表现一致。 #### 1. DOCTYPE对CSS的影响文档类型声明（DOCTYPE）是HTML文档的第一行，它...

(十年积累)div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法.docx: 然而，不同的浏览器对于CSS的支持程度和解析方式存在差异，特别是老版本的Internet Explorer（IE6、IE7、IE8）与Firefox等其他浏览器之间。以下是对这些浏览器中CSS兼容性问题的详细解释和解决方案。 1. **高度不...

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.docx: 以下是一些解决`div+css`在IE6、IE7、IE8、IE9以及Firefox、Chrome等浏览器兼容性问题的方法： 1. **DOCTYPE声明**：确保在HTML文档开头使用正确的DOCTYPE声明，如`<!DOCTYPE html>`，这有助于使浏览器以标准模式...

DIV CSS 网页兼容全搞定 IE6 IE7 IE8 IE9 火狐谷歌: 然而，由于不同浏览器之间的解析差异，尤其是在IE6、IE7、IE8等旧版本的Internet Explorer中，CSS兼容性问题时常出现。本文将深入探讨如何解决这些问题，确保网页在各种浏览器中都能正常显示。首先，编写XHTML格式...

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.pdf: 针对`IE6`、`IE7`、`IE8`、`IE9`以及`Firefox`、`Chrome`等浏览器的兼容性问题，我们可以采取以下策略： 1. **DOCTYPE声明**：DOCTYPE声明会影响浏览器进入不同的渲染模式。为了确保统一的行为，通常使用XHTML 1.0...

div表格垂直居中.pdf: \n\n最终，通过这些技术，可以创建一个兼容IE6+、Mozilla1.7+、NetscapeNavigator8+、Opera8.0+、Firefox1.0+和Safari1.0+的垂直居中布局。对于较旧的浏览器版本如Mozilla1.5+、NetscapeNavigator7+、Opera7+，理论...

DIV未知高度的垂直居中代码.rar: 这包括了Firefox（火狐）、Opera（欧朋）和Internet Explorer（IE）等流行浏览器的老版本，其中IE6.0和5.0是特别知名的，因为它们对某些CSS和JavaScript特性支持有限，因此能在这些老版本中运行表示代码的兼容性很好...

完全纯css实现div自适应居中兼容IE7 Chrome FireFox: 在本篇内容中，介绍了如何使用纯CSS技术实现div元素在网页中的自适应居中布局，同时确保兼容性可以覆盖至较旧的浏览器版本，如IE7、Chrome和Firefox。此处的自适应居中，指div能够在其父容器内水平及垂直方向上都...

CSS完美兼容IE6_IE7_FF的通用方法: ### CSS完美兼容IE6_IE7_FF的通用方法在网页设计与开发过程中，浏览器兼容性问题一直是前端开发者面临的重要挑战之一。特别是在早期的Web开发中，如何让网站同时兼容Internet Explorer 6（简称IE6）、Internet ...

css解决IE6,IE7,firefox兼容性问题.: ### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言随着互联网技术的发展，浏览器种类日益增多，其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期，IE6、IE7 和 ...

一个图片居中的CSS示例，兼容IE6,7,8和FF，opera,safari: 这个示例提供的是一种跨浏览器的解决方案，旨在确保图片在IE6、IE7、IE8以及Firefox、Opera、Safari等主流浏览器中都能实现居中对齐。我们将深入探讨这个CSS示例中的关键技术点。首先，我们来讨论如何实现图片水平...

Global site tag (gtag.js) - Google Analytics