CODEWITHSUNDEEP
htmlcss
user2711992
user2711992

Reputation: 61

How to Align form to the center in HTML/CSS

I have a problem with aligning the forms and buttons to the center, here is my code: 

<body>
<h1 style="font-family:Comic Sans Ms;text-align:center;font-size:50pt;color:#ff00ba;">
 You need to login :) </h1>     

<form style="font-family:Comic Sans Ms; align:center;">
 Username<br>
<input type="text" name="userid"/><br>
 Password<br>
<input type="password" name="pswrd"/>
<br><br>
<input style="font-family:Comic Sans Ms;" type="button" onclick="check(form)" value="Login"/>
<input style="font-family:Comic Sans Ms;" type="reset" value="Cancel"/>
</form>
........

You can see that I have put "align:center" in the form style, but it does not work, the form and button are still in the left of the webpage, actually, I tried div and it worked. however, how about if I do not use div and I just want to use my current format to style the alignment, is there any way to get it centered? Cheers

Upvotes: 0

Views: 6547

Answers (3)

chimos
chimos

Reputation: 664

The CSS "align: center;" property is wrong. "text-align: center;" may be what you are looking for.

Although it's named "text-align", it affects how content, not necessarily text, gets aligned inside the element in which it's applied. For example, you can align other HTML elements or images inside a form:

<form style="width:500px;text-align:center"> <!--This will align the 'input' on the center of the 'form'.-->
    <input type="text" style="text-align:center"> <!--This will align the text to the center of the 'input'.-->
</form>

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

CSS:

form, h1{
    clear:both;
    max-width:80%;
    margin:0 auto;
    display:block;
    font-family:Comic Sans Ms;
    text-align:center;
}

Upvotes: 0

Joakim M
Joakim M

Reputation: 1803

Use text-align:center;

JSFIDDLE

<body>
<h1 style="font-family:Comic Sans Ms;text-align:center;font-size:50pt;color:#ff00ba;">
 You need to login :) </h1>     

<form style="font-family:Comic Sans Ms; text-align: center;">
 Username<br>
<input type="text" name="userid"/><br>
 Password<br>
<input type="password" name="pswrd"/>
<br><br>
<input style="font-family:Comic Sans Ms;" type="button" onclick="check(form)" value="Login"/>
<input style="font-family:Comic Sans Ms;" type="reset" value="Cancel"/>
</form>

Upvotes: 4

Related Questions