checkbox和后面文字无法居中对齐的解决方案

在制作前端页面时,表单的页面中有时会存在表单元素与提示文字无法对齐的问题。


下面是针对这一问题的解决方案:

先上结果图看效果,吼吼~
checkbox和后面文字无法居中对齐的解决方案

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

例子的html代码
checkbox和后面文字无法居中对齐的解决方案
css代码

checkbox和后面文字无法居中对齐的解决方案


//radio

input[type="radio"]{
vertical-align: bottom;
}

//checkbox
input[type="checkbox"]{
vertical-align: middle;
}


乐意黎

文章地址:http://blog.csdn.net/aerchi/article/details/51163467

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览