首页 > css

div垂直居中的N种方法

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生 效,例如表格元素中的、、等,而像 < div>、这样的元素是没有valign特性的,因此使用vertical-align对它们不起 作用。 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它...

Media Queries详解

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><link href="css/print.css" rel="stylesheet" type="text/css" media="print" /&...

IE浏览器解决margin:0 auto;不居中办法

一般情况下需要将div居中显示时,使用Css样式:margin:0 auto;或者margin:0 auto 1px;即可,但有时使用margin:0 auto后在firef、Chrome等浏览器里能居中,而在IE678里不居中的现象。 如下代码: <style type="text/css"> #con{width:980px;martin:0 auto;} </style> margin: 0 auto 内容居中显示 解决方法一 可以是对网页主体<body>声明文本居中,即body{text-align:center} 即:...

Modernizr.js:为HTML5和CSS3而生!

modernizr这个js,在国外的主题里面很多地方都看到,就只记得是为HTML补充的,有点类似与responsive.js一样。今天搜索到这篇文章,深入的讲解了modernizr.js是为检测浏览器的CSS3和HTML5的属性而生,从而通过CSS来解决兼容性问题。 个人觉得这种做法明显增加了CSS代码量,而且可能会造成当用户的页面没有启用js的情况下,里面的CSS3效果无法使用,另外就是今后维护比较困难,如果改变了某个样式,那样子CSS的代码类也要改变。个人不推荐使用这种方法来写兼容代码。以下为译文 10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器...

CSS样式中'大于号>'

在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGROUND-IMAGE:url(../images/bg_face.jpg); Z-INDEX: 2; POSITION: fixed; WIDTH: 205px; BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; ...