How do I center this form so it stays centered when I adjust the size of my browser window?

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

Thank-you.

Recommended Answers

All 5 Replies

Here's what I did and it works.

<style type="text/css">
div {text-align:right}
</style>

<div>
<table cellpadding="5">
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
</table>
</div>

good job! but where is your 4?

Using margin 'auto' property can stay element in center. Don't use 'text-align' property to center the element. 'text-align' is only for text, not the element. You may also use like

CSS:
p {
     text-align: center
    }

HTML:
<p>This text will go to center</p>

Or use table cell align attribute. <td align="center">Align center cell</td> In your process. You could also use.

div {
     margin: 0 auto;
     width: 400px /* auto margin can only apply with exceed width, if not it will ignore it */
     }

I hope it will a little support for you.

Using margin 'auto' property can stay element in center. Don't use 'text-align' property to center the element. 'text-align' is only for text, not the element. You may also use like

CSS:
p {
     text-align: center
    }

HTML:
<p>This text will go to center</p>

Or use table cell align attribute.

<td align="center">Align center cell</td>

In your process. You could also use.

div {
     margin: 0 auto;
     width: 400px /* auto margin can only apply with exceed width, if not it will ignore it */
     }

I hope it will a little support for you.

simple. just wrap it with a div tag

<div id="wrap">
1.
<form>
2.
First name:
3.
<input type="text" name="firstname" />
4.
<br />
5.
Last name:
6.
<input type="text" name="lastname" />
7.
</form>
</div>

and insert this in css

#wrap{
width: (width of form)px;
margin: auto;
}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.