<!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" xml:lang="en" lang="en" >
<head><title>垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<H4>垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF</H4>
<div style="border:1px solid red; height:200px;">
<!--
设置一个空的SPAN,这个SPAN很重要,后面内联元素的位置齐将以它为参考。
display:inline-block的设置将触发IE6的LAYOUT,使之可设置高度,其它浏览器支持这个属性;
-->
<span id="s1" style="border:1px solid blue;width:10px; margin-left:-1px;vertical-align:middle; display:inline-block; height:100%;"></span>
<!--一系列的内联元素,有图片及其它的文本元素-->
<img id="s2" src="star.gif" alt="star" style="border:1px solid green;vertical-align: middle;" />
<span id="s3" style="border:1px solid green;">常口信息(2)条.</span>
<img id="s4" src="star.gif" alt="star" style="border:1px solid green;vertical-align: middle;" />
<span id="s5" style="border:1px solid green;vertical-align: middle;/*vertical-align: 80px;vertical-align: 80%;*/">ZXY测试居中</span>
</div>
<p>测试总结:
<ul>
<li>1)经测试,此种垂直居中方式的布局方式,兼容IE6+及FF浏览器</li>
<li>2)ID为S1的SPAN将是后面一系列内联元素的对齐的标杆(即位置参考相对坐标)</li>
<li>3)后面内联元素的相对位置只与S1有关,与它的相邻元素无关</li>
<li>4)调整后面内联元素的高度位置,比如S5,有多种方法:
<br>vertical-align: middle; --直接设置属性值
<br>vertical-align: 80px; --也可设置相对于S1的高度像素
<br>vertical-align: 100%; --也可设置对对于S1的高度百份比。注意这个100%是这个首先是这个文本是高度,假如这个文本的高度为20px,
那么这个100%=20PX;如果要设置到80px的高度,则为:vertical-align: 400%;
</li>
<li>5)除S1外的所有内联元素的相对位置都是基于‘S1=vertical-align:middle’这个基线位置而言的,即50%的高度,假如父DIV的高度为200px,则'middle基线'=100px;</li>
</ul>
<br>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head><title>垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<H4>垂直居中布局 Vertical-aligned 应用测试:兼容IE6/8/FF</H4>
<div style="border:1px solid red; height:200px;">
<!--
设置一个空的SPAN,这个SPAN很重要,后面内联元素的位置齐将以它为参考。
display:inline-block的设置将触发IE6的LAYOUT,使之可设置高度,其它浏览器支持这个属性;
-->
<span id="s1" style="border:1px solid blue;width:10px; margin-left:-1px;vertical-align:middle; display:inline-block; height:100%;"></span>
<!--一系列的内联元素,有图片及其它的文本元素-->
<img id="s2" src="star.gif" alt="star" style="border:1px solid green;vertical-align: middle;" />
<span id="s3" style="border:1px solid green;">常口信息(2)条.</span>
<img id="s4" src="star.gif" alt="star" style="border:1px solid green;vertical-align: middle;" />
<span id="s5" style="border:1px solid green;vertical-align: middle;/*vertical-align: 80px;vertical-align: 80%;*/">ZXY测试居中</span>
</div>
<p>测试总结:
<ul>
<li>1)经测试,此种垂直居中方式的布局方式,兼容IE6+及FF浏览器</li>
<li>2)ID为S1的SPAN将是后面一系列内联元素的对齐的标杆(即位置参考相对坐标)</li>
<li>3)后面内联元素的相对位置只与S1有关,与它的相邻元素无关</li>
<li>4)调整后面内联元素的高度位置,比如S5,有多种方法:
<br>vertical-align: middle; --直接设置属性值
<br>vertical-align: 80px; --也可设置相对于S1的高度像素
<br>vertical-align: 100%; --也可设置对对于S1的高度百份比。注意这个100%是这个首先是这个文本是高度,假如这个文本的高度为20px,
那么这个100%=20PX;如果要设置到80px的高度,则为:vertical-align: 400%;
</li>
<li>5)除S1外的所有内联元素的相对位置都是基于‘S1=vertical-align:middle’这个基线位置而言的,即50%的高度,假如父DIV的高度为200px,则'middle基线'=100px;</li>
</ul>
<br>
</body>
</html>