易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS图片垂直居中方法整理集合

看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
<!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>
<title>利用定位来显示垂直局中的图片</title>
<style type="text/css">
.miao {
width:500px;
height:220px;
line-height:220px;
border: 1px solid;
text-align: center;
}
.miao img {
vertical-align: middle;
}
</style>
<!--[if IE 6]>
<style type="text/css">
.miao span {
border: 1px solid red;
height: 100%; /* 要保证和父元素高度一样才行 */
writing-mode: tb-rl;
vertical-align: middle;
}
</style>
<![endif]-->
</head>
<body>
<h1>固定高宽的容器中,图片垂直局中。</h1>
<p>使用的绝对定位和相对定位的方法</p>
<div class="miao">
<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了
</div>
<hr />
<div class="miao">
<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了
</div>
<hr />
<div class="miao">
<span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了
</div>
</body>
</html>
  
/*lesliezmz 粘贴结束 */
/*yoom 粘贴开始 2010-01-18*/
因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法是:
<!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">
<


相关文档:

CSS分栏布局的方法:绝对定位和浮动

CSS分栏布局的方法:绝对定位和浮动
出处:网页教学网
作者:佚名
日期:2009-03-09
 
 在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute
、static、relative和fixed)中的绝对定位(absolute
positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位 ......

CSS: margin,padding详解

 
About Box Model:
一个块级元素由content, padding, background, border, margin五个部分组成. 立体图1如下:
 
 
 
平面图如下:
 
 
根据以上两图, 相信大家对于Box model会有个直观的认识.
以下说明margin和padding属性:
 
1. Margin: 包括margin-top, margin-right, ma ......

Css 同比例缩小图片

/*控制图片的大小*/
.contentimg{
max-width:600px;
/*max-height:100px;*/
}
*html.contentimg{
width:e­xpression(this.width>50&&this.width>this.height?60:auto);
/*height:expresion(this.height>50?50:auto);
*/
}
调用
  $("#"+id.substring(0,id.length-5)+"arCon"). ......

css:div属性详解


margin:层的边框以外留的空白
background-color:背景颜色
background-image:背景图片
padding:层的边框到层的内容之间的空白  
border:边框  
content:内容
 
步骤一、
分析一个典型的定义div例子:
 #sample{
margin:10px;
border: #111 10px solid;
......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号