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
