Home/ Questions/Q 742631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T08:46:12+00:00

I have a very simple web form which consists of labels and input fields,

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this CSS:

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