关于label和input对齐的那些事-创新互联
input文本和label对齐
默认状态下,也就是下面这样, 文字和input是居中的。
创新互联长期为上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为夏邑企业提供专业的成都做网站、网站建设、外贸营销网站建设,夏邑网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。但是经常设计图中有label的行高,或者input的高度设计,默认状态下,依然是居中的。但是很多时候label和input要浮动,一旦浮动,后面的input标签就紧紧的贴住了label标签,也就造成了视觉上看到并没有居中。
比如下面:
label { font-size: 12px; float: left; }input { height: 20px; }
渲染出来的效果是这样
但是这并不是我想要的结果,所以通常可以控制label的padding-top,视觉上让它看起来是居中的。就像下面一样:
input单选框和label对齐
默认状态下,label和radio是不对齐的,我们知道,input是内联元素,但是它依然是可以设置高度和宽度的,因为它是内联可替换元素。默认状态下,radio是有margin值的,但是这并不是它影响label和radio是不居中的。默认效果如下:
因为label对齐的是文字的基线,所谓基线,就是x的底端。
如果我们浮动的话,会发生什么事情呢?
label { font-size: 30px; float: left; }
结果发现,浮动之后,radio紧紧的贴着label,并且位于顶端。
那么到底如何让它们对齐呢?
label { font-size: 50px; vertical-align: middle; }input { vertical-align: middle; }
得出来的效果如下:
那么,我们再来测试一下,这种方法是否可以。设置label的高度。
label { font-size: 50px; display: inline-block; height: 140px; vertical-align: middle; }input { vertical-align: middle; }
结果显示如下:
说明,这种方法可行。还可以设置padding测试,这里就不测试了。
总结:
同时设置label和input的vertical-align: middle就可以了。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:关于label和input对齐的那些事-创新互联
当前链接:http://myzitong.com/article/ceddis.html