label文字与textarea、input垂直居中、顶部对齐的方法

在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观,如下图。

中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。

label文字与textarea、input垂直居中的方法

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顶部对齐的方法

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

(1)
上一篇 2018年3月18日 上午9:13
下一篇 2018年3月18日 上午11:46

99%的人还看了以下文章

  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    2.0K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    4.3K0
  • CSS的浮动及清除浮动的5种方法

    css属性float:left/right/none 左浮动/右浮动/不浮动(默认),文章介绍了清除浮动的5种方法,并指出其实现原理、优缺点和使用建议。

    2019年11月5日
    2.1K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    2.9K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    9.1K0
  • Html5一句代码制作语音搜索框

    HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

    2022年3月19日 网页制作
    6250

发表回复

登录后才能评论