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%的人还看了以下文章

  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    4.1K0
  • js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时,如何使用JS判断输入空格,为空或null的三种情况。

    2021年11月30日
    4.6K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.3K0
  • CSS常用类/ID命名规范

    书写规范请查看《CSS语法及命名规范(入门)》,本文介绍常用类/ID命名规范,CSS文件命名规范,如页面主体:main 内容:content 标签页:tab  章列表:list 信息:msg   标题:title   热点:hot 新闻:news注册:regsiter 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:cop…

    2019年3月14日
    4.5K0
  • 第8课:组织元素(span和div)

    pan和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本…

    2020年2月25日
    2.1K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    2.8K0

发表回复

登录后才能评论