noob: How center a form in the center of the browser

**johnCash** · Sep 27, 2007 14:58

I need to put the form in the center position of the browser page. Even if the browser is resized. How do I do this:

PHP Code:


<form method="post" action="name.php"> 

<input type="text" name="Name" />

<input type="submit" value="submit" />

</form>

**markbrown4** · Sep 27, 2007 16:28

Absolute center as in vertically and horizontally?
There's an FAQ on that

If it's just horizontally you can just give the form a width and margin: 0 auto;

**johnCash** · Oct 3, 2007 10:08

I am following the same concept as above, but for a form. It doesn't work. I don't see the any form in the browser. Can someone help me please. I am a noob to css.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">



<head>

    

    <link rel="stylesheet" href="mysite_name.css" type="text/css" />

</head>

<body>



<div  class="namebody" >

<div class="centre">

<div id="nameform">

<form method="post" action="/name.php"> 

<input type="text" name="Name" />

<input type="submit" value="submit" />

</form>

</div>

</div>

</div>

</body>

Code:

/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
/* end hack */
.namebody {
margin:0;
padding:0;
text-align:center;/* centre for ie5 and 5.5. */
min-height:200px;/*for mozilla/opera */
min-width:200px;/* """ */
}
div#nameform {
position: absolute;
left:0;
top: 50%;
margin-top: -100px; /* make this half your image/element height */
}
div.centre {
height:100%;
width:200px;
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
position:relative;/* gain stacking context for absolutely placed element */
}

form {
	padding: 10px;
}

**Paul O'B** · Oct 3, 2007 13:14

Hi,

A form is like any other element in the respect that it can be styled the same as a div. It makes no difference whether its a form or not as you can style it and move it where you want.

You need to know the actual height for this method.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* commented backslash hack for ie5mac \*/ 
html, body{height:100&#37;;margin:0;padding:0} 
/* end hack */
body {
text-align:center;/* centre for ie5 and 5.5. */
min-height:200px;/*for mozilla/opera */
min-width:200px;/* """ */
}
#nameform {
position: absolute;
left:0;
width:100%;
top: 50%;
margin-top: -33px; /* make this half your image/element height */
}
.centre {
height:100%;
width:200px;
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
background:red
}

form {
    padding: 10px;
}
</style>
</head>
<body>
<form id="nameform" method="post" action="/name.php">
    <div class="centre">
        <input type="text" name="Name" />
        <input type="submit" value="submit" />
    </div>
</form>
</body>
</html>

If you have an unknown height then you can use a more complicated method like this:

http://www.pmob.co.uk/pob/hoz-vert-center2.htm

**johnCash** · Oct 3, 2007 19:55

Paul,

Thank you so much.....enjoy the free internet beer

John

**johnCash** · Oct 4, 2007 14:50

Submit button in Firefox appears on to the right, but IE6 displays it on the left.
I want the submit button to be on the right as in FireFox for IE6 also. Can someone explain to me what is going on?

Here is my code:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Vertical centre an element of unknown height and width</title>

<style type="text/css">

/*

Here I put Eric Meyer's Reset CSS

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/



*/

html,body{height:100%}

#wrapper{

    height:100%;

    width:100%;

    display:table;

    vertical-align:middle;

}

#outer{

    display:table-cell;

    vertical-align:middle;

}

#formwrap{

    position:relative;

    left:50%;

    float:left;

}

#form1{

    

    padding:20px 20px;

    position:relative;

    text-align:right;

    left:-50%;

}

p{margin:1em 0}





label { font-weight: bold; }



input.text, input.title   { width: 300px; margin:0.5em 0.5em 0.5em 0; }

</style>

<!--[if gte IE 5]>

<style type="text/css">

#formwrap {top:50%}

#form1{top:-50%;}

</style>

<![endif]-->



</head>

<body>

<div id="wrapper">

    <div id="outer">

        <div id="formwrap">

            <form id="form1" method="post" action="">

                <p>

                     <input type="text" class="text" name="Name" value="" />

                </p>



                <p>

                    <input type="submit" value="Submit" />

                </p>

            </form>

        </div>

    </div>

</div>

</body>

</html>

**Paul O'B** · Oct 4, 2007 18:35

Hi,

It's a bug in IE.

Add This (which was in my demo

):

Code:

input{position:relative;}

**johnCash** · Oct 8, 2007 10:23

If you place the example into nested div, <div id="main">
<div id="content">, then it doesn't work anymore:

PHP Code:


<div id="main"> 
<div id="content"> 
<div id="wrapper">
    <div id="outer">
        <div id="formwrap">
            <form id="form1" method="post" action="">
                <p>
                    
                <input type="text" class="text" id="dummy1" name="dummy1" value=""> </p>
                
                <p>
                    <input type="submit" class="submit" value="submit" />
                </p>
            </form>
        </div>
    </div>
</div>
</div>
</div>

Can you tell me why that be the case?

**Paul O'B** · Oct 8, 2007 13:58

then it doesn't work anymore:

That's because you have killed the logic behind the 100% height. You only have one shot at 100% height and it must be the first element on the page. If you add outer elements then the inner elements have nothing to base their height on because you cannot base a height on auto height elements. Read the faq on 100% height for a better explanation

.

Depending on what you are trying to do exactly it might be possible to give these outer elements a 100% height but that will assume that content will never be greater than 100%. It all depends on exactly what you are trying to achieve as at the moment you have asked for a form vertically and horizontally centred which is what you got

User Tag List

Thread: noob: How center a form in the center of the browser

Thread Tools

Display

noob: How center a form in the center of the browser

IE6 and Firefox displaying it differently.

Bookmarks

Bookmarks

Posting Permissions