`
xiaoyongzeng
  • 浏览: 14474 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

垂直居中布局 Vertical-aligned 应用测试：兼容IE6/8/FF

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" 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>
  • 大小: 147.8 KB
分享到：
| jetty8+ 内嵌式启动运行demo
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics