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

  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    2.5K0
  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    8.0K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    2.8K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    5.6K1
  • CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    2.5K0
  • HTML5+CSS3制作网页实例:HTML5入门

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

    2019年3月7日
    10.8K0

发表回复

登录后才能评论