问题:一段时间以来,发觉div+css居中问题越来越被关注了,看了几个博客,果断验证了一下;
解决方案:图片:见附件,我测试了ie10和chrome27.0.1453.12
方案一:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" href="css/div-css-center1.css" rel="stylesheet" /> </head> <body> <div id="wrapper"> <div id="cell"> <div class="content">Content goes here</div> </div> </div> </body> </html> css:代码: @CHARSET "UTF-8"; body { background-color: gray; } #wraper { display: table; } #cell { display: table-cell; vertical-align: middle; background-color: white; }
方案二
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" href="css/div-css-center2.css" rel="stylesheet" /> </head> <body> <div class="content">Content goes here</div> </body> </html> css代码: @CHARSET "UTF-8"; body { background-color: gray; text-align: center; } #content,.content { position: absolute; top: 50%; /* left: 50%; */ /* width: 500px; */ height: 240px; margin-top: -120px; text-align: center; background-color: white; height: 240px; height: 240px; }
方案三:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <link type="text/css" href="css/div-css-center3.css" rel="stylesheet" /> </head> <body> <div id="floater"></div> <div id="content">Content here</div> </body> </html> css代码: @CHARSET "UTF-8"; body { background-color: gray; } #floater { float: left; height: 50%; margin-bottom: -120px; } .content,#content { clear: both; height: 240px; position: relative; background-color: white; }
方案四:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" href="css/div-css-center4.css" rel="stylesheet" /> </head> <body> <div id="content">Content here</div> </body> </html> css代码: @CHARSET "UTF-8"; body { background-color: gray; } .content,#content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 240px; width: 200px; background-color: white; }
方案五:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" href="css/div-css-center5.css" rel="stylesheet"/> </head> <body> <div id="content">Content here</div> </body> </html> css代码 : @CHARSET "UTF-8"; body { background-color: gray; } .content, #content { height: 100px; line-height: 100px; text-align : center; background-color: white; }
我试了,就方案四和方案五还可以实现,其它三种方案怎么都没有出效果,如果有知情者望不吝相告。
相关推荐
DIV+CSS 图片垂直居中效果
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
DIV+CSS上下左右绝对居中
DIV+CSS布局,DIV嵌套使用,Div上下,左右布局,居中显示。
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。
NULL 博文链接:https://javapub.iteye.com/blog/709361
NULL 博文链接:https://yangactive.iteye.com/blog/1576306
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
实现div+css的整体布局的实例,可以更好地理解这种布局,其中关于float用的比较多,还有div居中处理
div+css文本水平垂直居中,兼容ie、谷歌等浏览器
20个div+Css布局技巧 如居中,透明,
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
弄了个网页,在IE下都没啥问题,换成火狐才发现布局乱了,最主要的就是菜单flash不居中,在网上找了好久, 都说margin-left:auto margin-right:auto几乎所有的帖子都一样.自己照搬就是不行。。。
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
js+CSS实现弹出居中背景半透明div层的方法.docx
...
...
css图片垂直居中,分IE,与非IE进行,很详细的