在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观，如下图。
中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。
label文字与textarea、input垂直居中的方法
在input标签样式中加入css标签vertical-align: middle。
label文字与input、textarea垂直居中对齐代码示例一：
<label for="address"> 姓名：</label> <input type="text" name="address" id="address" maxlength="30" style="vertical-align:middle;" /> <label for="note"> 留言：</label> <textarea name="note" id="note" style="width:150px;height:40px;vertical-align:middle;"></textarea>
label文字与input、textarea垂直居中对齐代码示例二：
<style type="text/css">
input,textarea { display:inline-block; margin-right:3px; vertical-align:middle;}
</style>
<div>
<p class="clearfix">
<label for="name">姓名</label>
<input type="text" name="name" />
</p>
<p class="clearfix">
<label for="msg">留言</label>
<textarea name="msg" rows="5" cols="13"></textarea>
</p>
</div>
label文字与textarea、input顶部对齐的方法
<style type="text/css">
/*--- 清除浮动 ---*/
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix { display:block;}
label { line-height:21px; float:left; margin-right:3px;}
</style>
<div>
<p class="clearfix">
<label for="name">姓名</label>
<input type="text" name="name"/>
</p>
<p class="clearfix">
<label for="msg">留言</label>
<textarea name="msg" rows="5" cols="13"></textarea>
</p>
</div>
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1553.html
微信扫一扫 
支付宝扫一扫 