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"/>
时间: 2024-10-24 02:26:04