CSS处理div中对象垂直对齐
CSS设置
<style type="text/css">
.box {
border:#eee solid 1px;
width:300px;
height:120px;
line-height:120px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
1.文本
<div class="box">Sample text</div>
Sample text
2.图片(IE下在图片后面加一个空格)
<div class="box"><img alt="" src="http://www.csdn.net/images/newcsdnlogo.gif" /> </div>
相关文档:
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
</head>
<style>
.lastp{bord ......
/* Cascading Style Sheet for IE4.01 last updated 10-16-97 */
DIV {COLOR: #333333; FONT-FAMILY: "宋体", "Arial", "Tahoma"; FONT-SIZE: 9pt}
P {COLOR: #333333; FONT-FAMILY: "宋体", "Arial", "Tahoma"; FONT-SIZE: 9pt}
TD {COLOR: #333333; FONT-FAMILY: "宋体", "Arial", "Tahoma"; FONT-SIZE: 9pt}
BODY {C ......
Data visualization is mostly achieved with flash applications or
with help of some programming languages. Are those solutions the only
way to present, let's say simple data chart? How about giving it a try
with nothing but good ol' css?
Take a look at the Demo
| Download Css Chart
Approach
......
下面是CSS最常用和实用的技巧。
1.重置浏览器的字体大小
重置浏览器的默认值 ,然后重设浏览器
的字体大小你可以使用雅虎的用户界面重置
的CSS方案 ,如果你不想下载9MB的文件,代码如下:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td ......
jQuery插件: jquery.widget.shadowbox.js
/**
* 一个简单的设置DIV阴影的插件
*
* 功能:
* 1. 根据阴影宽度自动调整外层容器宽度,以及透明度
* 2. 可定义ShadowBox的宽度和高度
* 3. 可用CSS样式表定义可视化样式
*
* @author joe.he <developerworks@163.com>
* @copyright irgs.cn
*/
(fun ......