0

我有这个 html 代码，我想在它的 span 中垂直对齐复选框：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>asdad</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="inner_css/account.css" rel="stylesheet" type="text/css" />

    </head>
    <body class="xxx">
        <div class="fieldWrapper">
            <span class="fieldHeader">C++</span>
            <span class="checkboxOfField"><input style="text-align:center; vertical-align:middle" type="checkbox"></span>
            <div class="fildtablewrapper">
                <table>
                    <tr>
                        <td>
                            0-2
                        </td>
                        <td>
                            2-5
                        </td>
                        <td>
                    5 ומעלה                            
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" name="xxx" value="1"> 
                        </td>
                        <td>
                            <input type="radio" name="xxx" value="2"> 
                        </td>
                        <td>
                            <input type="radio" name="xxx" value="3"> 
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

这个CSS代码：

.xxx{
    direction: rtl;
    text-align: center;
}


.fieldWrapper{
    display: inline-block;
    width: 140px;
    background-color: yellow;
    text-align: center;
}

.fieldHeader{
    display: inline-block;
    width: 100%;
    direction: ltr;
    text-align: center;
}

.checkboxOfField{
    display: inline-block;
    width: 100%;
    background-color: red;
    height: 40px;
}

.fildtablewrapper{
    display: inline-block;
    width: 100%;
    text-align: center;
}

table{
    width: 100%;
}

td{
    width: 33.33%;
}

而且我仍然无法垂直对齐复选框，我已经搜索了我们并且找不到适合我的东西。请帮忙！

4

2 回答 2

2

将此添加到您的.checkboxOfField样式中：

line-height: 40px;

这将使复选框以跨度的 40px 高度为中心

于 2012-09-25T19:59:20.953 回答
2

尝试在您的 CSS 文件中添加以下内容

.checkboxOfField input {
height: 100%;
}
于 2012-09-26T12:06:23.083 回答