vertical-align 样式理解

文章参考

http://www.cnblogs.com/rixinren2010/archive/2012/03/10/2389301.html

 

适用于：        行内元素和单元格（table-cell）元素 

 

特别提醒：vertical-align只对行内元素有效，对块级元素无效。

 

个人理解应用范围：

1、图片 和 文字混排，使用vertical-align属性来定位

 

2、在table标签中的td种使用vertical-align属性来定位（可以使用display:table-cell,注意该标签父div一定是display:table）

 

<style>
.div_table{
	display: table;
}

.div_cell{
	display: table-cell;
	border: 1px solid green;
}
</style>
<div class="div_table">
	<div class="div_cell" style="vertical-align: middle">
		垂直居中的内容
	</div>
	<div class="div_cell">
		随机的内容<br>
		随机的内容<br>
		<span style="color: red">IE6 不支持display:table</span><br>
		随机的内容<br>
		随机的内容<br>
		随机的内容<br>
	</div>
</div>
<p>
<p>
<p>

<div>
    <span>x</span><span style="vertical-align: top;font-size: 6px">2</span><br/>
    <span>x</span><sub>2</sub><br/>
    <!-- 这里一定要注意字体的大小，否则显示不明显 -->
    <span>x</span><span style="vertical-align: top">2</span><br/>

    凤凰网<span style="vertical-align:super; font-size:10px">TM</span><br/>
    凤凰网<span style="vertical-align:sub; font-size:10px">TM</span>
</div>