Center aligned form with equal width labels
I have a very simple web form which consists of labels and input fields, however I can not seem to find a way of aligning the form in the center of the page and for the labels to have an equal width so that they appear neatly next to each other, one under the other. The structure of my page is basically:
<body>
<div class="form">
<form method="post">
<fieldset>
<label>Mobile:</label><input type="text" name="msisdn"><br/>
<label>Code:</label><input type="text" name="code"><br/>
<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>
Usually I would fix this by doing float:left on the label fields and setting a width on the labels, however for this I need the labels and input fields to be centered on the page. Also开发者_高级运维 I am not able to set the width of the page (or any containing divs) as the page will be displayed on mobile devices with different screen sizes.
Any suggestions as to how best style the form? Thanks
Try this CSS:
.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */
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.
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
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>
加载中,请稍侯......
精彩评论