【css】单选框和复选框文字垂直居中问题
2012-12-07 18:08
267 查看
现在的网站一般字体大小都是 12px,在 12px 下单选框和复选框文字垂直居中对不齐,不过要是字体大小是 14px 的话却完全没有这个问题。下面我整理了下解决方法,总共有 6 种。
兼容浏览器:chrome,firefox,ie8,ie7,ie6,safari
原文地址:http://www.zhangxinxu.com/wordpress/?p=56
PS:个人推荐第 2 种,第 5 种和第 6 种方法。因为这 3 种方法都没有用到 css hack。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css-checkbox-radio-vertical-align</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> body{font:12px SimSun;} p{margin:30px 10px;} .wrapper{margin:50px auto;width:500px;} .input1{vertical-align:text-bottom; margin-bottom:-1px; *margin-bottom:-4px;} .input2{height:13px; vertical-align:text-top; margin-top:0;} .input3{height:15px; vertical-align:bottom; margin-bottom:-1px; margin-bottom:-2px\9; *margin-bottom:0px;} .input4{height:14px; vertical-align:top; margin-top:1px; margin-top:0\9;} .input5{vertical-align:middle; margin-top:-2px;} .input6{vertical-align:-3px;} </style> </head> <body> <div class="wrapper"> <form action="#" method="post"> <h2>单选框</h2> <p><input type="radio" name="radio" id="radio1" class="input1"/><label for="radio1">解决方法一</label></p> <p><input type="radio" name="radio" id="radio2" class="input2"/><label for="radio2">解决方法二</label></p> <p><input type="radio" name="radio" id="radio3" class="input3"/><label for="radio3">解决方法三</label></p> <p><input type="radio" name="radio" id="radio4" class="input4"/><label for="radio4">解决方法四</label></p> <p><input type="radio" name="radio" id="radio5" class="input5"/><label for="radio5">解决方法五</label></p> <p><input type="radio" name="radio" id="radio6" class="input6"/><label for="radio6">解决方法六</label></p> <h2>复选框</h2> <p><input type="checkbox" name="checkbox" id="checkbox1" class="input1"/><label for="checkbox1">解决方法一</label></p> <p><input type="checkbox" name="checkbox" id="checkbox2" class="input2"/><label for="checkbox2">解决方法二</label></p> <p><input type="checkbox" name="checkbox" id="checkbox3" class="input3"/><label for="checkbox3">解决方法三</label></p> <p><input type="checkbox" name="checkbox" id="checkbox4" class="input4"/><label for="checkbox4">解决方法四</label></p> <p><input type="checkbox" name="checkbox" id="checkbox5" class="input5"/><label for="checkbox5">解决方法五</label></p> <p><input type="checkbox" name="checkbox" id="checkbox6" class="input6"/><label for="checkbox6">解决方法六</label></p> </form> </div> </body> </html>
兼容浏览器:chrome,firefox,ie8,ie7,ie6,safari
原文地址:http://www.zhangxinxu.com/wordpress/?p=56
PS:个人推荐第 2 种,第 5 种和第 6 种方法。因为这 3 种方法都没有用到 css hack。
相关文章推荐
- 【css】单选框和复选框文字垂直居中问题
- 【css】单选框和复选框文字垂直居中问题
- 单选框radio和复选框checkbox文字垂直居中问题
- css-图片和文字垂直居中问题
- 纯css实现div中单行文字,多行文字,嵌套div垂直水平居中问题
- [CSS]复选框单选框与文字对齐问题的研究与解决.
- [CSS]复选框单选框与文字对齐问题的研究与解决.
- css 文字垂直居中问题
- CSS 解决表单单行文本框中的文字垂直居中问题
- 使用css属性line-height实现文字垂直居中的问题
- CSS 图片+文字,文字垂直居中问题
- css实现文字垂直居中问题
- CSS解决未知高度的垂直水平居中自适应问题
- DIV+CSS如何让文字垂直居中?
- 关于css中两层div的水平垂直居中问题
- css文字垂直居中-好文收藏
- Css 中单行及多行文字如何实现水平垂直居中?
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- CSS实现文字和图片的水平垂直居中
- IE9不支持CSS line-height的文字垂直居中解决方法