文字和表單（checkbox/radio）元素垂直對齊方法，兼容Firefox和IE。

時間 2019-12-20

標籤文字表單 checkbox radio 元素垂直對齊方法兼容 firefox 欄目 HTML 简体版

原文原文鏈接

這幾天在作表單時總會碰到複選框(checkbox)和單選框(radio)與文字不對齊的問題，要不是checkbox上浮了，要不是文字上浮。在前端開發過程當中，單(復)選框和它們後面的提示文字在不進行任何設置的狀況下，是沒法對齊的，並且在Firefox和IE中相差甚大。即便設置了vertical-align:middle，也依然不能完美對齊。html

解決辦法：
一、文字大小必須是偶數，好比12PX。
二、將文字加上label標籤而且也添加vertical-align:middle樣式。
三、而後去除表單元素的邊距。前端

案例：測試

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</body>
</html>