Question

我有这个HTML代码，我想垂直对齐它的跨度中的checbox：

<!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%;
}

我仍然无法垂直对齐复选框，我搜索了我们，找不到对我有用的东西。请帮忙！

Answer 1

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

line-height: 40px;

将使复选框居中于跨度的40px高度

Answer 2

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

.checkboxOfField input {
height: 100%;
}

垂直对齐的复选框

2 个答案: