制作前端页面时，表单的页面中都存在表单元素与提示文字无法对齐的问题。下面是针对这一问题的解决方案：

先上结果图看效果,吼吼~

最上面两个是经过css处理后的效果，已经居中对齐了哦~，最后一个是没有处理的效果，明显没有对齐。解决的关键是vertical-
align：middle属性，一定要给input标签和文字的标签同时加上该属性。对于纯英文的内容而言，这样就可以了，但是对于包含中文内容的，如果
此时仍没有居中对齐，就需注意一下字体的设置了。经过测试，当把字体设置为Arial或Tahoma后，问题解决。下面是例子的源码：

例子的html代码

css代码

checkbox和后面文字无法居中对齐的解决方案的更多相关文章

  1. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...

  2. 针对bootstrap内联单选框input与文字不能居中对齐的解决办法

    1.html代码 <div > <label class="checkbox-inline first-label"> <input type=&qu ...

  3. PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例

    function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( ...

  4. vue小组件练习之文字居中对齐组件

    时隔多月,继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用V ...

  5. [01] radio ,checkbox 表单文字对齐

    http://www.cnblogs.com/wangsir015/p/5555818.html 这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是ch ...

  6. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  7. text-align:justify_内容居中对齐

    一直发现text-align : justify这个对齐方式不好使,都不知道为什么么么哒: 因为两端对齐的这个行的结束要一个有空字符串或者别的不可见的字符,用户代理会把这个行的最后几个字符往右边拉,实 ...

  8. iOS的UILabel设置居上对齐，居中对齐，居下对齐

    在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,博主参考国外网站,从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐.具体如下: // //  myUILabel.h ...

  9. 利用CSS实现居中对齐

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: <div class="parentDiv"> 这里随 ...

随机推荐

  1. 【转】手把手教你：Ubuntu14+apache2+django1.7+python2.7下网页/网站部署

    本人亲自尝试了网上众多的部署网页/网站方法,绝大多数都未能试验成功,这次的项目光部署这块遇到了很多问题,大概耗费了我一个星期. 本着:王道论坛中的赠人玫瑰,手留余香的精神.我把自己一路所走的历程发布出 ...

  2. 高德API+.NET解决租房问题(JS相关)

    在线地址:58同城品牌公寓高德搜房 Github地址:https://github.com/liguobao/58HouseSearch 知乎专栏(点赞用的):高德API+Python解决租房问题(. ...

  3. Mysql 启动运行

    MYSQL默认端口:3306用户: root   也可自己添加用户启动数据库服务名: MYSQL (在安装的时候会设置) 在开始菜单栏->附件->右键命令提示符->以管理员身份运行: ...

  4. 如何搭建SBT编译Scala开发的Android工程

    作者:戚明峰 最近接触了shadowsocks的Android客户端项目源码(https://github.com/shadowsocks/shadowsocks-android),刚好这个项目是使用 ...

  5. ubuntu开启crontab日志

    今天发现Ubuntu的/var/log下没有cron日志,用下面的命令即可开启: -default.conf cron.*              /var/log/cron.log #将cron前 ...

  6. JAVA虚拟机（一）：内存区域

    根据<java虚拟机规范第二版>规定,现阶段的java内存区域总体如下图 其中,方法区和堆是所有线程共享区域. 虚拟机栈,本地方法栈,程序计数器是各线程独占. 概述一下各个区域 先说说线程 ...

  7. Daily Scrum02 12.02

    今天是黑色星期一,虽然大家最近被各种大作业压得身心疲惫,但是团队的凝聚力战胜了一切不快. 看看同志们今天的战绩,是不是又有一种充实感油然而生呢??? By Ryan Mao who? Today? T ...

  8. java文件的I/O

    [原创] java文件的I/O操作,简单来说就是向文件中写入数据以及从文件中读出数据,这是我们平日做的最多的操作,这里给出两种文件I/O操作,当然还有许多的操作方法,各种流的使用,可谓是高深莫测:不管 ...

  9. lintcode-118-不同的子序列

    118-不同的子序列 给出字符串S和字符串T,计算S的不同的子序列中T出现的个数. 子序列字符串是原始字符串通过删除一些(或零个)产生的一个新的字符串,并且对剩下的字符的相对位置没有影响.(比如,&q ...

  10. STL中mem_fun与mem_fun_ref的区别[转]

    http://www.cnblogs.com/Purple_Xiapei/archive/2012/05/27/2520483.html STL中mem_fun和mem_fun_ref的用法 分类:  ...