首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

DIV兑现垂直居中(兼容IE6、IE7、IE8,Firefox)

2012-10-24 
DIV实现垂直居中(兼容IE6、IE7、IE8,Firefox)html xmlnshttp://www.w3.org/1999/xhtmlheadtitle多

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>

热点排行