Html: How to Center Align a Form

Html: How to Center Align a Form

I have the following HTML code and I want to make my form aligned in center.

<form action="advsearcher.php" method="get">
    Search this website:<input align="center" type="text" name="search" />
    <input type="submit" value="Search"/>
</form>

How can I do that?

11 Answers

@Lucius and @zyrolasting have it right.

However, you will probably need to give the form a specified width for it to work properly.

form { 
margin: 0 auto; 
width:250px;
}
0

Just put some CSS into the stylesheet like this

form {
  text-align: center;
}

then you're done!

5

Being form a block element, you can center-align it by setting its side margins to auto:

form { margin: 0 auto; }

EDIT:
As @moomoochoo correctly pointed out, this rule will only work if the block element (your form, in this case) has been assigned a specific width.
Also, this 'trick' will not work for floating elements.

This will have the field take 50% of the width and be centered and resized properly


    {    
        width: 50%;
        margin-left : 25%
    }

May also use "vw" (view width) units instead of "%"

Use center:

<center><form></form></center>

This is just one method, though it's not advised.

Ancient Edit: Please do not do this. I am just saying it is a thing that exists.

3

Just move align="center" to de form tag

<form align="center" action="advsearcher.php" method="get">
    Search this website:<input type="text" name="search" />
    <input type="submit" value="Search"/>
</form>

The last two lines are important to align in center:

.f01 {
    background-color: rgb(16, 216, 252);
    padding: 100px;
    text-align: left;
    margin: auto;
    display: table;
}
#form{
   position:fixed;
   top:50%;
   left:50%;
   width:250px;
}

You can adjust top & left depending on form size.

Try this : Set the width of the form as 20% by:
width : 20%;
now if the entire canvas is 100 %, the centre is at 50%. So to align the centre of the form at the centre, 50-(20/2) = 40. therefore set your left margin as 40% by doing this :
left : 40%;

simple way:Add a "center" tag before the form tag

1
<center><form></form></center>    

does work in most cases like The Wobbuffet mentioned above...

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Alexander Ross
Author

Alexander Ross

Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.