CODEWITHSUNDEEP
htmlcssvertical-alignment
vlio20
vlio20

Reputation: 9295

vertical align of checkbox

I have this html code, i want to align vertically the checbox in it's 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>

and this css code:

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

and I still can't vertical align the checkbox, I have searched the we and could not find something that works for me. Please HELP!

Upvotes: 0

Views: 6568

Answers (2)

Soichi Hayashi
Soichi Hayashi

Reputation: 3584

Try adding following in your CSS file

.checkboxOfField input {
height: 100%;
}

Upvotes: 2

kingkode
kingkode

Reputation: 2220

add this to your .checkboxOfField style:

line-height: 40px;

that will make the checkbox centered to the 40px height of the span

Upvotes: 2

Related Questions