ansaurus

Question

Center aligned form with equal width labels

Answer 1

+2 A:

Try this CSS:

.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */

Aren 2010-04-15 22:24:47

It's worth mentioning that the `<div class="form">` may also need the `margin: 0 auto;` rule (depending on its width/position etc.

David Thomas 2010-04-15 22:41:37

Actually the div just needs a width other than 100% (default) and it'll auto-adjust the margins.

Aren 2010-04-15 22:50:19

Answer 2

+1 A:

You can center the the surrounding <div class="form"> and use float:left with a width for the labels. They float left inside the centered div.

Maybe you need to add <div>s around the label/input combinations to keep them on one line.

PS I do not know whether it is due to the example, but with the <label> tag you can specify a for attribute to make the labels belong to the input fields and make they clickable. See here for more info.

Veger 2010-04-15 22:25:01

Answer 3

A:

Recommend you set margin attributes on the label and input tags, but you could enclose each row in a div.

E.g;

<div style="margin: 0 auto;"> <label>Mobile:</label><input type="text" name="msisdn"> </div>

The setting for margin of 0 auto essentially centers it on the page

KADE 2010-04-15 22:33:21

Answer 4

A:

Pretty much the same as others, though I would use relative widths adding one the input element to keep it from shrinking and leaving the whitespace lop-sided.

<head>
    <title></title>
    <style type='text/css'>
    .container
    {
        margin: 0 auto;
    }
    .container label
    {
        /* tweak to taste */
        float: left;
        width: 35%;
    }
    .container input
    {
        /* tweak to taste */
        width: 63%;
    }
    </style>
</head>
<body>
    <div class="form">
        <form method="post">
        <fieldset>
            <div class="container">
                <label>Mobile:</label>
                <input type="text" name="msisdn" />
            </div>
            <div class="container">
                <label>Code:</label>
                <input type="text" name="code" />
            </div>
            <div></div>
            <br />
            <input type="image" src="submit-button.gif" alt="Submit" />
            <br />
            <input type="checkbox" name="ts_and_cs" />
            <label>Accept Terms and Conditions</label>
            <br />
            <br />
        </fieldset>
        </form>
    </div>
</body>

Felan 2010-04-15 23:11:30

ansaurus

tags:

views:

answers:

Center aligned form with equal width labels

related questions