如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!这就是为什么在制作的时候看到图片
会靠上的原因。如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div,或者你试下
把他们放在2个div中,或者一个图片放div中,文字直接放页面中,不放div ,这样还可以给网页瘦身。
把那个放图片和文字的层css设置为比如id叫#aa
#aa {height: 30px; line-height:30px; vertical-align: middle;}
这样就可以使里面的东西在层里垂直居中了。一定要设置相同高度和间距。
把图片加上align="absmiddle"
<img src="http://img.baidu.com/img/logo-zhidao.gif" align="absmiddle" />
我是用这个方法解决的。
我的文字和图片在同一个span里面,我在图片中加上这个属性就解决问题了。但是直接写在页面里面是否有表现和结构不分离的嫌疑呢?呵呵
补充下:文字居中的,只要用line-height就可以控制居中,图片居中的话,要用padding或者margin!
DIV没有文字垂直居中属性,这个确实是个缺陷问题。
需要把图片和单行文字垂直居中对其,可以给图片 的CSS 定义一个vertical ......
1. CSS字体定义简写规则
一般的写法会是这样:
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
而实际上你可以用更简洁的写法:
font: bold italic small-caps 1em/1.5em verdana,sans-serif
是不是更省事?不过使用这种简写需要注意几点:要使简写定义有效必须至少提供 font-size 和 font-family 这两个属性;同时font-weight, font-style 以及 font-varient 这几个属性如果不做设定的话将默认为normal。
还有background,border等等.
1. 关于background的写法
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1)您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
2)url括号中的引号是没有必要的,我们可以不写引号
2. 关于Border的写法,如果您想定义div的四个边的颜色不同,而粗度和样式都一样,您可以这样写:
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上,右,下, ......
* {
margin:0;
padding:0;
font-size:13px;
*font-size:11px;
font-family:Verdana, Arial, 宋体,Helvetica, sans-serif;
/*scrollbar-face-color:#dff9fe;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#9adae7;
scrollbar-darkshadow-color:#9adae7;
scrollbar-Shadow-color:#FFFFFF;
scrollbar-arrow-color:#006498;
scrollbar-track-color:#fff;*/
}
div 边框较小 border 样式设置
border:1px solid #7898b8;
css中用javascript
width:expression((document.body.clientWidth)>130?"130px":"auto"); ......
文字自动使用样式
.inputText{
border:1px solid #7898b8;
height:20px;
padding-left:2px;
line-height:20px;
background-image:url(images\\inputtext_bg.gif);
background-repeat:repeat-x;
color:#339900;
}
.inputText是 字体自动设置样式的名称
各种控件自动套用样式
比如table,td
table{border-collapse:collapse;}
td{word-break:break-all;}
也就是说 样式名称与空间标签名一致 ......
<!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=gb2312" />
<title>CSS边框阴影</title>
<style type="text/css">
div {border-width: 1px; border-style: solid; padding: 1px;padding:1px;}
.a {background-color: #F3F3F3; border-color: #FBFBFB;}
.b {background-color: #D8D8D8; border-color: #E8E8E8;}
.c {background-color: #FFF; border-color: #BBB; height: 100px;color:#ff0000;}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c">源码爱好者(CodeFans.net)提供编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等。</div>
</div>
</div>
</body>
</html> ......
dojo.query()函数要用到各种css选择器来寻找dom元素,下面就常见的css3选择器进行简略的介绍。
1、 基本选择器:根据标签。
例如:P{color:blue}
2、 选择器组:多个标签之间用逗号隔开。
例如:P,h{color:blue}
3、 Id选择器:用#id名表示。
例如:<div id=”d”>111</div>, #d{color:blue}
4、 类选择器:用.类名的方式
例如:定义一个类样式:.c{color:blue}
应用到所有标识有该类名的标签中,如<div class=”c”>
5、 结构化选择器:根据元素之间的包含关系选择,最高层的排在最前面,中间用空格
例如:div p{color:blue} 寻找外层是div标签的p标签元素
6、 属性选择器:用[属性]的方式指定拥有该属性的元素列表
例如:[height]{color:blue}
7、 其他选择器。
例如:
全局选择器 * :匹配所有的元素
E>F:孩子选择器
E F:后代选择器
E[height]:匹配E且拥有height属性
E[height=200]
E#myid:匹配E且拥有“myid”的id ......