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
