- 浏览: 409941 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (174)
- ajax (2)
- java (4)
- spring (0)
- eclipse (0)
- ejb (0)
- hibernate (2)
- jsf (1)
- c# (13)
- sqlserver (12)
- oracle (1)
- ibatis (3)
- appfuse (0)
- seam (0)
- log4j (0)
- Java2Html (0)
- javascript && html && css (38)
- 英语学习 (1)
- jag (2)
- guice (0)
- warp (0)
- facelets (1)
- struts (0)
- 资源汇聚 (4)
- 打印 (2)
- 热点文章收藏 (2)
- aop/aop.net (3)
- 代码生成器 (1)
- 数据库 (1)
- 开发工具集 (1)
- Erlang (1)
- web services (1)
- acegi (2)
- 存储过程集汇 (1)
- 黑客攻防 (2)
- C/C++ (6)
- wap (1)
- 缓存 分布式 (0)
- 企业库 (3)
- 搜索引擎:Lucene (0)
- 数据安全 (1)
- uml (1)
- 项目管理 (3)
- asp (1)
- SWT/JFACE (3)
- 面试与技巧 (1)
- 程序人生 (1)
- java rcp (2)
- 软件测试 (4)
- 不同应用服务器整合 (1)
- 数据仓库 (2)
- 求职/离职 (1)
- 网站珍藏 (1)
- visual studio 插件 (2)
- IT那些事 (1)
- linux/unix (10)
- windows (1)
- javaMail (1)
- common mail (1)
- tomcat (1)
- java并发/并行 (3)
- emacs (5)
- zookeeper (1)
- hadoop (7)
- 自动运维部署 (8)
- 业界资讯 (1)
最新评论
-
ffshow2006:
有一个有毒啊
两款Access密码破解器 -
nicepulse:
太好了,正好最近我也遇到这类的问题,代理不大正常,刚开始就是重 ...
SQL Server Agent 执行SSIS失败解决方案 -
supersnake:
这个比较喜欢
5款纯div+css制作的弹出菜单(标准且无js) -
cloudgamer:
我也写过一个提示效果
javascript tooltip (网页的提示效果) -
kuchaguangjie:
顶1个,哈哈
获取页面请求参数的JS脚本
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。 一、单行垂直居中
div { height:25px; line-height:25px; overflow:hidden; } 这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。 二、多行未知高度文字的垂直居中
div { padding:25px; } 这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 三、多行文本固定高度的居中
div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; } 点击此处查看运行效果 四、在Internet Explorer中的解决方案
<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中的垂直居中:
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的原理,我也只是了解了一点皮毛,还要再研究) 五、完美的解决方案
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%; } 至此,一个完美的居中方案就产生了。 p.s. 垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同。 参考文章:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html |
发表评论
-
有关滚动条Scroll样式的设置
2008-08-07 17:02 30961.overflow内容溢出时的设置(设定被设定对象是否显示滚 ... -
两个文件改变网站流量
2008-08-01 14:49 924用两个文件,用js 改变网站流量 url_1.html 代 ... -
div 超出的文字以省略号显示
2008-07-24 21:36 1737div { overflow:hidden; ... -
css中如何使div居中(垂直水平居中)
2008-07-16 11:48 3832css中如何使div居中(垂直水平居中) 2007-01-12 ... -
DivCSS布局实例 用dl dt dd来制作列表
2008-07-16 09:03 1332今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但 ... -
css控制div自动换行
2008-07-16 08:56 5131自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字 ... -
网页颜色搭配精选十例
2008-07-10 03:43 2898颜色的使用在网页制作 ... -
网页制作傻瓜工具集锦
2008-07-10 03:42 1797初学网页制作时,往往觉 ... -
五彩缤纷建网页(5)网页色彩配色软件
2008-07-10 03:39 10091.ColorWiz (国外) 超媒体置标语言(HTML) ... -
不间断连续图片滚动效果的制作方法
2008-07-10 03:35 2883以前我们站点也介绍过 ... -
图片的连续滚动
2008-07-10 03:28 768<html><head></he ... -
HTML各个元素对搜索引擎的权重比例
2008-07-09 13:10 796HTML各个元素对搜索引擎 ... -
css教程–十步学会用css建站(全)
2008-07-03 12:57 1380css教程–十步学会用css建站(全) 关键字: css教程 ... -
div 、ul、li 动态生成table (2)
2008-06-24 16:49 1578/// <summary> /// ... -
div 、ul、li 动态生成table
2008-06-18 13:45 2291public string GenerateTable(int ... -
5款纯div+css制作的弹出菜单(标准且无js)
2008-06-16 13:01 18375款纯div+css制作的弹出菜单(标准且无js) 一、最 ... -
Js字符串操作函数大全
2008-06-11 15:59 9055Js字符串操作函数大全 Js字符串操作函数大全 /***** ... -
JS实现局部打印和预览
2008-05-27 13:59 6184JS实现局部打印和预览: 第一种: JS 实现简单的页面局部 ... -
前台开发使用工具集合
2008-05-09 08:45 3786前台开发使用工具集合 1。 Fiddler一个很强大 ... -
获取页面请求参数的JS脚本
2008-04-17 13:11 3523//获取指定请求参数的值function getParamet ...
相关推荐
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
NULL 博文链接:https://javapub.iteye.com/blog/709361
带DOCTYPE的写法。。 ------------------ CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ...附送一个 DIV垂直居中的页面~~~
在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,...
在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;...因此我们需要通过别的方法去实现元素的垂直居中,下面我总结了几种了常用垂直居
经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><...
在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,需要...
第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用背景色给页面分块 5.2 背景图片 5.2.1 页面的背景图 5.2.2 背景图的重复 5.2.3 背景图片的位置 5.2.4 固定背景图片 ...
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择...
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 标准...
Flexbox实现一个div元素在body页面中水平垂直居中: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Flexbox...
1、 响应式布局如何实现 2、三种方式实现一个 div 水平和垂直方向的居中 3、 数据类型判断 4、 rem 布局原理 5、 Arguments 6、 原型和原型链
英文原文:...经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中,相信这也是很多设计师喜欢做的事情。首先,我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离,然后我们需要设
参考文章:CSS实现垂直居中的5种方法 具体效果如图: 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而css来设置居中也是非常简单的。 1、首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?...
在前端开发中,我们经常会遇到各种上不同场景的关于居中的布局,一般水平居中是相对简单,而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。 水平居中 水平居中相对于其它几中居中排列...