HTML: How to center align a form

Question

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?

score 66 · Answer 1 · answered Mar 16 '12 at 12:49

66

@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;
}

answered Mar 16 '12 at 12:49

TryHarder

2,704
8
47
65

score 37 · Answer 2 · edited Sep 15 '15 at 09:40

37

Just put some CSS into the stylesheet like this

form {
  text-align: center;
}

then you're done!

edited Sep 15 '15 at 09:40

m4n0

29,823
27
76
89

answered Feb 23 '13 at 20:35

mads

371
3
2

@JohannBehrens: Why exactly is it bad practice? – favq Dec 11 '13 at 15:49
2

@anonymous: You will want to separate semantics and design from each other by using ONLY HTML in an .html-file and ONLY CSS in a .css-file. Makes your code clean and structured, readable for other developers or designers, future-proof and I could go on for a lot longer. – Johann Behrens Dec 13 '13 at 12:21
text-align:center works . Just use it in a css file and all is well. You may use in the HTML as well , but as @JohannBehrens pointed out , style must be separate . Morever is obsolete. My best bet is text-align:center in a stylesheet on the form tag. – Akash Kumar Sharma Apr 06 '15 at 06:21
that will make all forms on your site center aligned. – Carlitos Jul 06 '17 at 15:34
this centres the text within the form, not the form within the window .. is the question ambiguous? – DJDave May 01 '20 at 11:58

Lucius · Answer 3 · 2012-07-09T15:54:27.750

22

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.

edited Jul 09 '12 at 15:54

answered Mar 16 '12 at 12:42

Lucius

968
1
11
16

score 5 · Answer 4 · answered Dec 31 '18 at 19:54

5

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 "%"

answered Dec 31 '18 at 19:54

Yuri Gridin

469
5
6

Cilan · Answer 5 · 2018-10-14T18:29:48.803

4

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.

edited Oct 14 '18 at 18:29

answered Mar 03 '14 at 01:39

Cilan

13,101
3
34
51

2

is deprecated since HTLM 4 – epox Dec 03 '16 at 18:25
@epox as explained in the link – Cilan Dec 03 '16 at 18:55
Still works and recognised in browsers, but as Cilan mentioned, not advised. – heinkasner Aug 07 '18 at 09:58

score 2 · Answer 6 · edited Aug 07 '18 at 10:21

2

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;
}

edited Aug 07 '18 at 10:21

Jesse

3,522
6
25
40

answered Aug 07 '18 at 09:45

jasraj

51
2

score 2 · Answer 7 · edited Nov 12 '22 at 23:40

2

Just move align="center" to the form tag.

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

edited Nov 12 '22 at 23:40

Paolo

20,112
21
72
113

answered Oct 16 '20 at 13:21

Chicken Jon

29
1

There's no align attribute in [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) – Shub Aug 27 '23 at 11:10

score 0 · Answer 8 · answered Apr 04 '14 at 03:54

0

#form{
   position:fixed;
   top:50%;
   left:50%;
   width:250px;
}

You can adjust top & left depending on form size.

answered Apr 04 '14 at 03:54

Machinerium

199
1
11

score 0 · Answer 9 · answered Jan 04 '17 at 03:31

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%;

score -1 · Answer 10 · answered Dec 12 '16 at 12:41

-1

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

answered Dec 12 '16 at 12:41

Akshay

1

11

Center is deprecated. – Thomas Ayoub Dec 12 '16 at 12:45

score -2 · Answer 11 · edited Apr 23 '14 at 15:28

-2

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

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

edited Apr 23 '14 at 15:28

demongolem

9,474
36
90
105

answered Apr 23 '14 at 15:08

carlstarus

1

1

-1 `` is deprecated. 1. [W3Schools](https://www.w3schools.com/tags/tag_center.asp) 2. [Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) – Jose Fernando Lopez Fernandez Dec 29 '17 at 19:27
Still works and recognised in browsers, but not advised. – heinkasner Aug 07 '18 at 09:59

HTML: How to center align a form

11 Answers11