<span style=”font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;”>大大的文字</span>后面是静止的文字。
</div>
##================== test ==================
document.body.innerHTML = ‘<div id=”conatiner” style=”border: 1px solid red; width: 500px; height: 300px; text-align: left;”>aaaaaaaaa<div style=”border:1px solid blue;display:inline-block; vertical-align: bottom;”><div style=”border: 1px solid green; width: 300px; height: 200px; text-align: center; display: inline-block;display: inline-block;display: inline-block;display: inline-block;*display:inline;*zoom:1;margin:auto;display: inline-block;”>12313123123<input type=”button” style=”margin:auto;display:inline-block;height: 40px;” value=”click”><span style=”background:#aaeeff;height: 40px;”>hello world</span></div>8888</div>bbbbbbbbbb</div>’;
##====================================
2.如果不想用table元素实现垂直居中，在IE8以上版本和firefox中，display: table-cell; 可以让div以表格单元格的方式显示，设置样式为
#div2{display: table-cell; vertical-align: middle; } ，但IE6中不支持display: table-cell;
3、如果是单行文本，为了兼容IE6，可以使设置行高与div的高度一致 #div2{heigh:100px;line-height:100px;}
4、对于多行文本，如果包含文本的div高度不固定，为了兼容IE6可以使设置top和bottom的padding为相同的固定值，div随文本内容增加而自动改变高度 #div2{height:auto; padding:10px 0px;}
5、同样，需要剧中的元素如果 position:absolute; 需要明确设置 top、bottom 为0 才能使浏览器对其实现自动排版，因此使用 vertical-align 排版的元素最好不要设置 position:absolute
三.绝对居中
1、利用百分比偏移和margin负值，该方法对所有元素生效，该方法兼容所有浏览器
<style>
.div_1{
position:relative;
border: solid 1px red;
width:200px;
height:200px;
background-color:silver;
}
.content {
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
margin-top:-25px;
margin-left:-25px;
/*或者 margin:50%; top:-25px; left:-25px; */
border:1px solid green;
}
</style>
<div class=”div_1″>
<div class=”content”>
Content here
</div>
</div>
2、利用绝对定位 0 偏移 和 margin:auto; ，两侧偏移都被设置为0时，margin:auto 将使内容居中，该方法对所有元素生效，该方法不兼容低于 IE8 的浏览器
<style>
.div_1{
position:relative;
border: solid 1px red;
width:200px;
height:200px;
background-color:silver;
