手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS 实现未知内容高度的垂直水平居中(改良版)
CSS 实现未知内容高度的垂直水平居中(改良版)
摘要:垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了...

垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera...如发现问题有劳回复评论!

<mce:style><></mce:style><style mce_bogus="1">*{margin:0;padding:0;border:none;font:12px Verdana,"宋体";}

#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;*position:relative;}

#middle{width:100%;display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}

#inner{*position:relative;*top:-50%;text-align:center; background:#F00;}

#inner img{vertical-align:middle;*position:relative;*top:-1px;}</style>

<body>

<div id="outer">

<div id="middle">

<div id="inner">

<>

</div>

</div>

</div>

</body>

【CSS 实现未知内容高度的垂直水平居中(改良版)】相关文章:

CSS实现同一行的图片和文字垂直居中对齐的方法

CSS网页布局的意义与副作用

使用CSS代码的空格实现中文对齐的方法

css实现文字过长显示省略号的方法

CSS实现文字自动换行(兼容Firefox)

一款纯css实现的垂直时间线效果

固定宽高的DIV如何绝对居中

CSS实现样式布局的锦囊妙计22招

用css实现十字的布局示例代码

DIV+CSS制作的网页如何让网页居中

精品推荐
分类导航