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

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

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

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

例子的html代码

css代码

时间： 2024-10-18 13:08:57

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

小图标和文字的居中对齐-小总结

小图标和文字的居中对齐问题,相信大家在很多时候会遇到.今天楼主从其他大神那边扒了一些方法,现在做个小小的总结. 说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址:http://www.iconfont.cn/plus/collections/detail?cid=3223)我的图标尺寸是20px*20px 第一种办法:vertical-align和line-height结合 特点:这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况. 效果图: 代码如

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

想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这里涉及到两个属性,一个是line-height,另一个是vertical-align.在IE里面,只需要line-height就可以实现这个效果,不过要想在firefox和opea里面也实现这样的效果,必须用到vertical-align,而且这是属性一定要定义在image上面,而不是定义在div上

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

function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( 'Ymd' ) . '/'; $img = $date . md5 ( $source . $text1 . $text2 . $text3 ) . '.jpg'; if (file_exists ( './' . $img )) { return $img; } $main = imagecrea

checkbox与说明文字无法对齐的问题

写过Web页面的朋友大概都曾遇到过这样的问题:checkbox与说明文字(比如一个label标签或一个a标签)无法对齐,要不是checkbox上浮了,要不是说明文字上浮. 以前遇到过这个问题,但是都直接忽视,并未深究.今天要解决项目中遗留下的界面显示问题,这个问题终于绕不过去了,因为它真的是无处不在. 今天,借助于伟大的google,同时自己不断试验,终于解决了这个"老大难"的"历史遗留问题".现将经验分享如下: 其实很简单,真的灰常简单,把要对齐的每个标签,都加一

[05] radio ,checkbox 表单文字对齐

http://www.cnblogs.com/wangsir015/p/5555818.html 这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大.即使设置了vertical-align:middle,也依然不能完美对齐. 解决办法:1.文字大小必须是偶数,比如12PX.2.将文字加

图片与文字居中对齐css

图片与文字居中对齐css * 方法 1. 给图片和文字元素都设置:`vertival-align:center` * 示例 1. HTML ```html <h3> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox=&q

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

在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,我从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐.具体如下: 1.新建一个类VerticalAlignmentLabel.h继承自UILabel 2. // //  VerticalAlignmentLabel.h //  inface // //  Created by huangzengsong on 15/5/10. //  Copyright (c) 2015年 huangzs. All rights r

利用CSS实现居中对齐

1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: 1 <div class="parentDiv"> 2 这里随意填写~... 3 </div> 1.1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现.CSS代码如下: 1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100p

HTML学习笔记——各种居中对齐

0.前言 水平居中基本方法--指定块的宽度并设定块的左右外边距为auto,上下外边距可取0,那么该块可以在父元素中水平居中. 样式如下: 1:margin:0px auto 2:margin-left:auto; margin-right:auto; 垂直居中基本方法--设定块的上下内边距相等. 样式如下: padding-top:20px; padding-bottom:20px; 1.div居中对齐 [HTML] <!DOCTYPE html> <html> <head&