BlogJava-分享ｊａｖａ带来的快乐-文章分类-css 处理技巧http://www.blogjava.net/lyjjq/category/48597.html我喜欢ｊａｖａ新东西zh-cnWed, 22 Aug 2012 23:29:31 GMTWed, 22 Aug 2012 23:29:31 GMT60如何让div中的内容垂直居中http://www.blogjava.net/lyjjq/articles/386031.html强强强强Wed, 22 Aug 2012 07:06:00 GMThttp://www.blogjava.net/lyjjq/articles/386031.htmlhttp://www.blogjava.net/lyjjq/comments/386031.htmlhttp://www.blogjava.net/lyjjq/articles/386031.html#Feedback0http://www.blogjava.net/lyjjq/comments/commentRss/386031.htmlhttp://www.blogjava.net/lyjjq/services/trackbacks/386031.html

  虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。    要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：

一、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距（padding）法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

p { padding:30px; }

这段代码的效果和line-height法差不多。

三、定位法

顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。    它的Html代码为：

<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>

这段代码比上一种方法中多出了一个名为sub的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于box垂直方向的50%，从而制作出content在box中垂直居中的效果，它们的CSS代码如下：

<html>
<head>
<style>
 #box {
  border:1px solid #000; background:#F00; width:400px; height:400px; position:relative;
 }
 #subwrap {
  position:absolute; top:50%;
 }
 #content {
  border:1px solid #000;color:#FFF;
 }
</style>
</head>
<body>
<div id="box">
<div id="subwrap">
<div id="content">dddd</div>
</div>
</div>
</body>
</html>

这段代码无论是在IE中还是Firefox中，都能正常居中了。    当然，肯定还有许多垂直居中的方法，欢迎各位朋友交流补充。



强强 2012-08-22 15:06 发表评论
]]>css 判断浏览器http://www.blogjava.net/lyjjq/articles/350369.html强强强强Tue, 17 May 2011 01:07:00 GMThttp://www.blogjava.net/lyjjq/articles/350369.htmlhttp://www.blogjava.net/lyjjq/comments/350369.htmlhttp://www.blogjava.net/lyjjq/articles/350369.html#Feedback0http://www.blogjava.net/lyjjq/comments/commentRss/350369.htmlhttp://www.blogjava.net/lyjjq/services/trackbacks/350369.html<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>关于用CSS区分Firefox、IE6、IE7webjx.com</title>
 <style type="text/css">

 #example{color:red ;}/*firefox*/
 *html #example{color:blue;}/*ie6*/
 *+html #example{color:green;}/*ie7*/

 </style>
 </head>
 <body>
 <div id="example">在FireFox下应为红色，在IE6.0下应为蓝色，在IE7.0下应为绿色。</div>
 </body>
 </html>



强强 2011-05-17 09:07 发表评论
]]>CSS hack:CSS区分浏览器IE6/IE7/firefox http://www.blogjava.net/lyjjq/articles/350368.html强强强强Tue, 17 May 2011 01:02:00 GMThttp://www.blogjava.net/lyjjq/articles/350368.htmlhttp://www.blogjava.net/lyjjq/comments/350368.htmlhttp://www.blogjava.net/lyjjq/articles/350368.html#Feedback0http://www.blogjava.net/lyjjq/comments/commentRss/350368.htmlhttp://www.blogjava.net/lyjjq/services/trackbacks/350368.htmlCSS hack区别不同浏览器，CSS hack写法：

区别IE6与FF：
       background:orange;*background:blue;


区别IE6与IE7：
       background:green !important;background:blue;


区别IE7与FF：
       background:orange; *bac IT人才网(http://it.ad0.cn) kground:green;


区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

www.ad0.cn
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

 IE6 IE7 FF
* √ √ ×
!important × √ √


--------------------------------------------------------------------------------
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。



强强 2011-05-17 09:02 发表评论
]]>