我想很多人都会碰到label与input 对齐的问题。 这个东西本身不难,但是要做到与IE这个东西兼容确实有点头疼。 参考各大门户网站的前端源码。 得一方法,以记录之: html确实很简单:

帐号 输入用户帐号.

密码 输入用户密码.

CSS如下:

label{ display: inline-block; padding: 0 10px; vertical-align: middle; }

input{ outline: none; border: 1px solid rgb(216, 216, 216); padding: 2px 10px 2px 10px; }

input[type="text"]{ height: 14px; line-height: 14px; border-radius: 5px; padding:10px 10px; vertical-align: middle; color:#666; } input[type="button"]{ padding: 0px 10px; height:40px; }

.login-box p{ vertical-align:middle; padding:10px 10px; }

那么这里最主要的问题就是 input中采用了paddng的方式。

用padding将input撑开,那么这时候input的高度就只有14px;

然后再设置line-height为14px; 再加上vertical-align垂直居中,就能将input中的文字垂直居中。

需要将input与label垂直对齐,只需要将他们的父节点的vertical-align设置为middel.

再将height与line-height的高度设置为一致,当然必须要比input的实际高度高或者是相等。

这里说的是实际高度。 这里说的是实际高度。

这里记录一下CSS盒子模型的高度问题:

CSS深入之label与input对齐!的更多相关文章

  1. 关于label和input对齐的那些事

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  2. 关于label和input对齐的那些是秦

    input文本和label对齐 默认状态下,也就是下面这样, 文字和input是居中的. <div> <label>我是中国人</label> <input ...

  3. css实现表单label文字两端对齐

    如图,在我们写页面的时候,经常遇到这种的情况,而需求是想让label文字两端对齐,我们来看看如何用css解决 /**css代码**/ ul li{ list-style: none; } .info- ...

  4. label 和input/textarea居中对齐

    设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐

  5. label与input间距的小问题

    先码后文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. 控制label标签的宽度,不让它换行 label标签左对齐

    1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...

  7. angular中label包含input点击事件的问题

    问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName   //INPUT, 点击img ...

  8. label和input里面文字不对齐的解决方法!

    测试了集中方法,发现不行.只能用专署标签解决这个问题. <fieldset>    <legend>神光咨询后台管理登录</legend>    <br /& ...

  9. label、input、table标签

    <label>标签 <form> <label for="male">Male</label> <input type=&qu ...

随机推荐

  1. HDU 4888 (网络流)

    Poroblem Redraw Beautiful Drawings (HDU4888) 题目大意 一个n行m列的矩形,只能填0~k的数字. 给定各行各列的数字和,判定有无合法的方案数.一解给出方案, ...

  2. Unity3D ShaderLab 布料着色器

    Unity3D ShaderLab布料着色器 布料着色器是我们在虚拟现实中经常使用的着色器.本篇就来完成一个较为简单的布料着色器. 新建Shader,Material,InteractiveCloth ...

  3. 【OpenGL】法线变换详解(Normal Transform)[转]

    http://blog.csdn.net/xiajun07061225/article/details/7762711 在图形学中,同样的一个模型视图变换矩阵可以用来变换点.线.多边形以及其它几何体, ...

  4. M2: XAML Controls

    本小节介绍如何在界面上添加简单的XAML Controls, 本例中我们用到了Grid, TextBlock, Button, 和StackPanel控件.XAML自身所有的控件都声明在Windows ...

  5. linux监控nmon和analyser的使用

    测试压力的时候使用linux一个简单的监控工具nmon,不仅可以实时监测,也可以生成文件以图标样式展现,小巧实用 安装nmon nmon实际上是个tarball直接解压到所要放置的目录,然后直接运行就 ...

  6. ZMMR107-批量更改PO经价值

    ************************************************************************ Title : ZMMR107 ** Applicat ...

  7. ZSDR017-客户订货价格和库存

    *----------------------------------------------------------------------*ZSDR017-客户订货价格和库存*---------- ...

  8. Set-常用API及详解

    SetAPI: 类别 方法 增 add.addAll 删 remove.removeAll 长 size 遍 iterator 判 isEmpty hashCode 使用与集合大同小异,主要的区别就在 ...

  9. ZOJ 1048 Financial Management

    原题链接 题目大意:给出12个月的收入,求一个平均值. 解法:没什么好说的,就是一个除法. 参考代码: #include<stdio.h> int main(){ int i; float ...

  10. leetcode之反转链表

    原文链接:点击打开链接 Reverse a singly linked list A linked list can be reversed either iteratively or recursi ...