解决办法：
1、文字大小必须是偶数，比如12PX。
2、将文字加上label标签并且也添加vertical-align:middle样式。
3、然后去除表单元素的边距。
案例：
效果图
| 代码如下 | 复制代码 |
|
<style> label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> <input class="inputcheckbox" name="test" value="1" type="checkbox"> |
|
其它的表单元素
效果图
| 代码如下 | 复制代码 |
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试vertical-align</title> <style> *{margin:0;} label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>测试文字x</label> <br/><br/> <input class="inputcheckbox " name="test2" value="2" type="radio"> <label>测试文字x</label> <br/><br/> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <br/><br/> <label>测试文字</label> <input class="inputcheckbox " name="Button1" type="button" value="按钮" /> <br/><br/> <select class="inputcheckbox " name="Select1"> <option>测试文字</option> </select> <label>测试文字</label> </html> |
|
上面我们主要用到了vertical-align方法来帮你解解决了文字和表单元素不能垂直对齐问题，有需要的朋友可参考一下。
时间： 2024-09-09 11:21:33