vertical-align两种应用场合

vertical-align两种应用场合

(1)用在td/th中或display:table-cell元素中：让当前元素中的文本内容在竖直方向上居中
css部分：
.content{
display: table-cell;
width: 300px;
height: 100px;
border: 1px solid #aaa;
text-align: center;
/*line-height: 100px;*//*此时使用无效*/
vertical-align: middle;/*具备valgin属性的元素才能使用*/
}
body内容：
<div class="content">
一行文字1<br/>
一行文字1<br/>
一行文字2
</div>
(2)用在img/textarea等inline-block元素中：让当前元素同一行中的其他元素与自己的竖直方向上的对齐方式
css部分：
img{
height: 100px;
vertical-align: middle;
}
body内容：
验证码：<input /><img src="box1.png"/>