CODEWITHSUNDEEP
htmlcss
Schnulli
Schnulli

Reputation: 41

Adjusting checkboxes To Align Center

I want to adjust checkboxes in the middle of screen.

My html code:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
    <form method="get" style="text-align: center">
<input  name="check1" type="checkbox">short text<br>
<input  name="check2" type="checkbox">medium-length text__________<br>
<input  name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>

The checkboxes are on different positions because of different text length. What's the best way to adjust them to a vertical line roughly to the position of the checkbox of the longest text ("check3")?

I'm sorry for this probably simple question.

Upvotes: 0

Views: 45

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22570

You can go with something as simple as setting a width to your form and then setting margin: 0 auto like so:

HTML

<form method="get">
    <input  name="check1" type="checkbox" />short text<br>
    <input  name="check2" type="checkbox" />medium-length text__________<br>
    <input  name="check3" type="checkbox" />long text________________________________<br>
    <input name="Submit1" type="submit" value="submit" />
 </form>

CSS

form { display: block; margin: 0 auto; width: 400px; }

jsFiddle

!OR!

If you don't want to set the width, you can set the display of the form to table and get the same result, but with an auto width:

HTML -> the same

CSS

form { display: table; margin: 0 auto; }

jsFiddle

!OR!

If you want it fully centered, horizontal and vertical, you can use a variation of the following:

HTML

<table>
    <tbody>
        <tr>
            <td>
                <form method="get">
                    <input  name="check1" type="checkbox" />short text<br />
                    <input  name="check2" type="checkbox" />medium-length text__________<br />
                    <input  name="check3" type="checkbox" />long text________________________________<br />
                    <input name="Submit1" type="submit" value="submit" />
                 </form>
            </td>
        </tr>
    </tbody>
</table>

CSS

html, body { margin: 0; height: 100%; width: 100%; }
table { height: 100%; margin: 0 auto; }
td { vertical-align: middle; }

jsFiddle

Upvotes: 0

darshan
darshan

Reputation: 319

Use div tag and then u can use margin attribute and remove style="text-align: center" form form tag

#checkbox {
float:left
margin-left:70px;
}


<div id="checkbox">
<form method="get" >
<input  name="check1" type="checkbox">short text<br>
<input  name="check2" type="checkbox">medium-length text__________<br>
<input  name="check3" type="checkbox">long text________________________________<br>
<input name="Submit1" type="submit" value="submit"></form>
   </div>

http://jsfiddle.net/48fwg/

Upvotes: 0

Becuzz
Becuzz

Reputation: 6866

You can change it to this which I believe will get you what you want:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Test</title>
</head>
<body>
    <form method="get" style="text-align: center;">
        <div style="display: inline-block; text-align: left;">
            <input  name="check1" type="checkbox">short text<br>
            <input  name="check2" type="checkbox">medium-length text__________<br>
            <input  name="check3" type="checkbox">long text________________________________
        </div>
        <br>
        <input name="Submit1" type="submit" value="submit">
    </form>
</body>
</html>

This way you don't need to know the width of your text beforehand.

Upvotes: 2

Related Questions