How To Put A Form In The Center Of The Page with

Question

0.00/5 (No votes)

See more:

Hello!

Please how do I position a form to be in the center of a webpage, using HTML & CSS?

Kindly visit this site for an example: http://www.rhapsodyofrealities.org/onlinereachout2013/[^]

Thank you.

Posted 18-Jul-13 4:10am

namo77

Add a Solution

Comments

maneavnash 18-Jul-13 10:15am

use center tag

Sergey Alexandrovich Kryukov 18-Jul-13 10:45am

No, this tag will center all the elements in the form, while you often just want to shift the form (or other block element) to the center. Please see my solution.
—SA

Arpit Shrivastava 18-Jul-13 10:20am

I have analyze your form, and it is centered, but the Label you use for like "Your Name", "Location", you have set your label a width (198px) which you need to minimize.

You can also use
text-align: center;
in your CSS file for the form.

Sergey Alexandrovich Kryukov 18-Jul-13 10:46am

It won't work, be the reason I explained above. Please see my solution.
—SA

Arpit Shrivastava 18-Jul-13 10:53am

But still you use
text-align: center;
in your style tag

Sergey Alexandrovich Kryukov 18-Jul-13 11:21am

You can remove it, it's not the point. Don't confuse centering of elements with text alignment.
—SA

namo77 18-Jul-13 10:44am

Thanks for the replies, but center tag doesn't do what i want, it doesn't put the content in the center of the "page". Also, "text align: center" doesn't work.

Sergey Alexandrovich Kryukov 18-Jul-13 10:46am

Exactly. The real solution will be different. Please see mine.
—SA

2 solutions

Solution 1

This is a bit harder to achieve than it may seem at first glance, and center tag won't really work. Please consider this code:

HTML

<html >
	<head>
		<title>???</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css"><!--
			.center {
				margin-top:10px;
				margin-left:auto;
				margin-right:auto;
				text-align:center;
				border:solid 1px black;
				width:828px;
				height:20px;}
		--></style>
	</head>
<body>

<div class="center">It will work for any inner HTML you want to place here...</div>

</body>
</html>

Got the idea?

—SA

Posted 18-Jul-13 4:42am

Sergey Alexandrovich Kryukov

Updated 18-Jul-13 4:44am

v2

Comments

Valery Possoz 18-Jul-13 10:59am

The problem is that there's a huge fixed size width for the label and he's right aligned then in the CSS:

form.register label{
color:#444;
width:198px;
float: left;
text-align: right;
margin-right: 16px;
margin-top:2px;
}

So even if the form is centered, the CSS for the labels will push everything to the right, and it will look weird.

Sergey Alexandrovich Kryukov 18-Jul-13 11:19am

Well, you don't follow my advice exactly. Center just the block element you need to center. Say, format outer div separately, its inner HTML separately. What's the problem?
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

namo77 · Accepted Answer · 2013-07-18T05:24:00

I finally did it!

Here is the solution, it fits the <div> tag exactly in the center of the page.