- 浏览: 215401 次
- 性别:
文章分类
- 全部博客 (213)
- jsp (2)
- 数据库 (3)
- photoshop cs4破解 (0)
- 关闭windows更新 (1)
- myeclipes开发经验总结 (1)
- 再次探究Unicode与ASCII编码 (1)
- hp probook 4411s电脑在用光盘安装时没有镜像问题 (1)
- hp probook 4411s电脑在xp系统下安装快捷键的问题 (1)
- 关于双系统和三系统的安装 (1)
- win7下个性化透明度的修改 (1)
- 原型开发工具axure (1)
- 将数据库表间关系导入到visio (1)
- word中自动生成目录 (1)
- 数据库日志文件已满的处理方法及更改数据库日志文件大小的方法 (1)
- 关于数据库语句insert的总结 (1)
- SQL Server2005创建登录名 (1)
- 登录名登陆时出现无法打开用户默认数据库登录失败 (1)
- 登录名登陆时出现 sql server 2005 sa登录报错:已成功与服务器建立连接,但是在登录过程中发生错误。 (1)
- 对于在写文章时标号的使用 (0)
- 对于论文word排版的技巧 (1)
- 求职简历的书写 (1)
- 惠普HP 4411s拆机 图文教程 (适用于4411s、4410s、4416s、4510s、4311s拆机) (1)
- 学术论文各部分的写作要求与写作方法 (1)
- 毕业论文的规范 (1)
- 对于在写文章时标号的使用(学术性论文) (0)
- 对于在写论文时标号的使用(学术性论文以及毕业论文) (1)
- 终止正要运行的程序 (1)
- : Address already in use: JVM_Bind (端口被占用) (1)
- 关于用myeclipes开发jsp程序时的问题 (1)
- 在连接数据库时出现此驱动程序不支持 Java Runtime Environment (JRE) 1.6 版。请使用支持 JDBC 4.0 (1)
- 关于数据表命名以及在网页中显示的图片命名问题 (1)
- 关于jsp中数据库的连接问题 (1)
- win7下建立无线网络(一网多人共享) (1)
- Adobe dreamweaver cs5 photoshop cs5的破解文件以及注册号 (0)
- Windows 使用技巧之WinZIP密码破解 (1)
- 破解WINRAR以及去除购买提示的方法 (1)
- win7激活 (0)
- win7(ultimate)激活 (0)
- 去除windows7安全提示的方法 (1)
- u盘上的操作系统(winpe的制作) (1)
- 将数据库表间关系导出到visio (1)
- css+div中三列自适应宽度问题 (1)
- css+div小小总结 (1)
- Adobe dreamweaver cs5 photoshop cs5的破解文件 以及注册号 (0)
- 每次开机都会出现 “C:\WINDOWS\system32\source\系统程序勿删除.vbs ” (1)
- sql server 2005中int char varchar nvarchar 的区别 (1)
- dos命令以及制作.bat文件 (1)
- 一键清理系统垃圾.bat文件 (1)
- jsp的email功能 (1)
- 数据库连接池 (1)
- JAVA_HOME和TOMCAT_HOME (1)
- 查看计算机的网络信息 (1)
- 关于jcreator的问题 (1)
- java中main函数的作用 (1)
- 堆和栈的区别 (1)
- 连接数据库sql server 2005时端口的问题 (1)
- 对于html中form表单的认识 (1)
- 连接数据库驱动时的.newInstance() (1)
- Displaytag详解 (1)
- xml文件的配置 (1)
- server.xml文件的配置 (1)
- tomcat中conf中的context.xml的配置 (1)
- Web.xml文件配置详解 (1)
- tomcat 7: IllegalArgumentException: taglib definition not consistent with specification version (1)
- 数据库中创建自增列 (1)
- jsp中的分页问题 (1)
- 在jsp中null与("")的区别 (1)
- servlet中不同页面中传值的四种方式 (1)
- jsp中标签库的使用 (1)
- 广播域与冲突域 (1)
- Java容器类List、ArrayList、Vector及map、HashTable、HashMap分别的区别 (1)
- this的小问题 (1)
- 虚函数和虚基类、纯虚函数、抽象类抽象方法 ,动态绑定 (1)
- Overload和Override的区别 (1)
- NumberFormatException异常 (1)
- 在编程时的两个小问题 (1)
- 关于将数据库中的数据返回list的问题 (1)
- java ee 13种技术规范 (0)
- java ee 13种技术(规范) (1)
- JSP和Struts解决用户安全退出问题 (1)
- cookie的安全性问题 (1)
- 数据库操作返回值的问题 (1)
- java产生随机数 (1)
- 关于NoClassDefFoundError异常的问题 (1)
- java中的大树问题 (0)
- java中的大数问题 (1)
- NumberFormatException错误 (1)
- 两个小技巧 (0)
- 几个个网络中查看一些值(ip (1)
- arp (1)
- tcp (1)
- udp (1)
- mac等)小技巧 (1)
- js的使用小知识点 (1)
- myeclipse破解 (0)
- myeclipse编译问题 (1)
- servlet的部署问题 (1)
- 关于编码知识以及中文乱码的解决方案 (1)
- 关于javac与java命令的一个小问题 (1)
- css与div的比较 (1)
- 在写存储过程中注意的问题 (1)
- 项目开发中的几点规范 (1)
- java转义字符 (1)
- 移动字幕 (1)
- 动态网站功能模块介绍 (1)
- 什么是ajax (1)
- 图片查看器以及图片轮换代码收集 (1)
- 网站中的日历汇总 (1)
- javax.servlet.ServletException: File "/up.jsp" not found (1)
- 验证码 (1)
- jsp的几个小问题 (1)
- Jcreator Pro 4.50注册码 (1)
- javabean的自动生成 (1)
- res.sendRedirect()和req.getRequestDispatcher().forward(req (1)
- res)的区别 (1)
- 用displaytag组件实现分页详解 (1)
- 将已有项目导入myeclipse中 (1)
- uri url urn的原理及java实现 (1)
- java中object(String)类型转换为int (1)
- 对于out.print、out.println、out.write的理解 (1)
- 静态生成 (1)
- 获取字符串的特定字符 (1)
- 异常详细信息: System.Data.SqlClient.SqlException: 将截断字符串或二进制数据 (1)
- 把字符类型转换成时间类型 (1)
- The method getRealPath(String) from the type ServletRequest is deprecated (1)
- java中对于文件操作的总结 (1)
- servlet用jspsmart上传的时候获得pageContext对象 (1)
- jspSmartUpload上传下载 (1)
- 关于用jspSmartUpload控件上传文件并附带参数 (1)
- 关于数据库字段的设计 (1)
- 关于数据库的主外键 (1)
- 数据库的使用 (1)
- 让页面加载前执行js等事件 (1)
- JS页面跳转 (1)
- 有关于jsp中的包含页面 (1)
- 关于textarea的几点 (1)
- JSP数据和JavaScirpt数据交互使用问题的一种解决方法 (1)
- jsp中引用javascript中的变量和js中引用jsp的变量 (1)
- quote symbol expected错误 (1)
- div+css文字垂直居中 (1)
- 调用存储过程(转载) (1)
- Java调用SQL Server的存储过程详解 (1)
- execute、executeQuery和executeUpdate之间的区别 (1)
- 关于form表单与链接 (1)
- java程序的执行过程 (1)
- myeclipse设置快捷键 (1)
- 【摘】eclipse 中如何安装插件 (1)
- java.lang.IllegalArgumentException: Cannot format given Object as a Date (1)
- 常见数据库常用端口 (1)
- 用电脑建手机wifi(不用软件) (1)
- word如何自动生成目录 (1)
- sql server (mssqlserver)无法启动 (1)
- 如何删除自带的软件(包括联通定制机自带软件) (1)
- Oracle数据库、实例、用户、表空间、表之间的关系 (1)
- lt18i获得root权限 (1)
- 无法启动承载网络 连接到系统上的设备没有发挥作用 (1)
- XP with SP3 VOL 下载及密钥 (0)
- 开机时默认启动系统设置 (1)
- 对于目标文件系统,文件XXXXX过大 (1)
- 只有ie能上网,其他浏览器和软件都不能 (1)
- j2me搭建环境 (1)
- asp连接sql server数据库方式 (1)
- 清除cookie和flashcookie (1)
- 不能上网的一个原因 (1)
- 新增迅雷下载地址:Objective-c/iOS/iphone开发视频教程迅雷/高速下载 (1)
- ie不能上网 (1)
- 五款免费VPN介绍 (0)
- Java处理多人同时读写文件的文件锁处理 (1)
- 去除开机后出现拨号连接提示框 (1)
- 关于eclipse编码的问题 (1)
- eclipse tomcat的使用 (1)
- Eclipse中将web项目发布到Tomcat webapps (1)
- The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: (1)
- 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} (1)
- Eclipse下Tomcat插件的安装 (1)
- 无法启动程序,因为计算机中丢失MSVCP71.DLL (1)
- oracle 10g的安装与卸载 (1)
- ORA-12154: TNS: 无法解析指定的连接标识符 (2)
- oracle客户端plsql的使用方法 (1)
- Eclipse自动生成UML图 (1)
- win7开通远程桌面访问 (1)
- 在远程连接时提示“您的凭据不工作”怎么办 (1)
- java.util.ConcurrentModificationException (1)
- java关于xml操作的一点理解 (1)
- Exception:Content is not allowed in prolog (1)
- java.net.SocketException: Connection reset (1)
- java FTPClient的使用 (1)
- 三种tomcat部署项目的方法 (1)
- excel冻结窗格 (1)
- java中获取系统属性以及环境变量 (1)
- 安裝 AnyConnect 時出現錯誤訊息「The VPN client agent was unable to create the interprocess communication depot.」 (1)
- linux 与windows实现端口转发 (1)
- TTL expired in transit (1)
- route add 行业应用 (1)
- java 数字证书操作(转) (1)
- Software caused connection abort: recv failed 一种解决办法 (1)
- inputStream对象的available()方法 (1)
- web.xml 中的listener、 filter、servlet 加载顺序及其详解 (1)
- java.lang.NumberFormatException: For input string: "" (1)
- ajax向后台传中文报错 (1)
- 刷新父窗口方法 (1)
- [转载]Eclipse-修改工程名 (1)
- 内存溢出之Tomcat内存配置(转) (1)
- forword 和redirect的区别(转) (1)
- 页面中禁用鼠标右键和回格键 (1)
- 中文乱码 (1)
- 父页面刷新问题 (1)
- spring 事务管理 (1)
- 关于异常类型 (1)
- 关于systeminfo的使用 (1)
- https及ca证书 (1)
- sql限制总结 (1)
- Cannot assign requested address出现的原因及解决方案 (转) (1)
- du与df的区别(转载) (1)
- jvm内存模型及可能出现的内存溢出 (1)
- 高并发下的oom killer (1)
- oracle如何看执行计划 (1)
- 关于批量作业中遇到的问题 (1)
- 浅谈应用日志 (1)
- 自认证证书的创建 (1)
- java集合应用 (0)
- java多线程 (0)
- 高并发思考 (0)
- 关于java IO (0)
- 加装ssd不重装系统,系统迁移 (1)
- linux下查看jdk版本 (1)
- linux内存 (1)
- pdm的使用 (0)
- mysql不走索引的原因 (0)
- java字符编码 (0)
- mysql视图效率优化 (1)
最新评论
-
hualom:
...
Displaytag详解
div+css文字垂直居中(转载)
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。
CSS网页布局DIV水平居中的各种方法
一、单行垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:
imoker.cn(爱摩客)提供的代码片段:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示!</div>
</body>
</html>
不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。
二、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码:
imoker.cn(爱摩客)提供的代码片段:
div {
padding:25px;
}
这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>现在我们要使这段文字垂直居中显示!
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html>
三、多行文本固定高度的居中
在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
imoker.cn(爱摩客)提供的代码片段:
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>现在我们要使这段文字垂直居中显示!
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>
这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法。
四、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:
imoker.cn(爱摩客)提供的代码片段:
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
如果我们对subwrap进行了绝对定位,那么content也会继承了这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:
imoker.cn(爱摩客)提供的代码片段:
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理,我也只是了解了一点皮毛,还要再研究)
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
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>
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:
imoker.cn(爱摩客)提供的代码片段:
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%;
}
至此,一个完美的居中方案就产生了。
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同。
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。
CSS网页布局DIV水平居中的各种方法
一、单行垂直居中
如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:
imoker.cn(爱摩客)提供的代码片段:
div {
height:25px;
line-height:25px;
overflow:hidden;
}
这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示!</div>
</body>
</html>
不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。
二、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码:
imoker.cn(爱摩客)提供的代码片段:
div {
padding:25px;
}
这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>现在我们要使这段文字垂直居中显示!
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html>
三、多行文本固定高度的居中
在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
imoker.cn(爱摩客)提供的代码片段:
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>现在我们要使这段文字垂直居中显示!
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>
这个方法应该是很理想了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法。
四、在Internet Explorer中的解决方案
在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。例如,我们有下面这样一个(X)HTML代码段:
imoker.cn(爱摩客)提供的代码片段:
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
如果我们对subwrap进行了绝对定位,那么content也会继承了这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:
imoker.cn(爱摩客)提供的代码片段:
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理,我也只是了解了一点皮毛,还要再研究)
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
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>
五、完美的解决方案
那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器,你可以参考这篇“简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera”:
imoker.cn(爱摩客)提供的代码片段:
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%;
}
至此,一个完美的居中方案就产生了。
imoker.cn(爱摩客)提供的代码片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同。
相关推荐
DIV+CSS 图片垂直居中效果
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
css图片垂直居中,分IE,与非IE进行,很详细的
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
div+css文本水平垂直居中,兼容ie、谷歌等浏览器
NULL 博文链接:https://javapub.iteye.com/blog/709361
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...
div中多行文字垂直居中
全屏垂直居中的一个办法 DIV+CSS , 这个方面有一点不好, 就是不能自动适应,必须把高和宽写死!
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
div框水平垂直居中跟内容垂直居中
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
div+css多行文字实现垂直居中,高度可自动适应
对于页面上的块级元素,只须定宽及设置margin:auto 0;即可在垂直上居中,但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢,今天我们来探讨下。
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
DIV内多行文字垂直居中,并且超过固定行数时显示省略号