More Group Sites
School Rankings
Jobless Net
Better Home
Enviro++

Help | Subscribe/Unsubscribe | Rules | Other Group Sites: Better Education | Better Education Forum
Welcome Guest Search | Active Topics | Members | Log In | Register

Developer Forum » Software Engineering and Information Technology » Web Application Development » How to place a form at the center of screen?

How to place a form at the center of screen? Options · View
Previous Topic · Next Topic
hong
Posted: Saturday, February 26, 2011 7:18:55 AM

Rank: Administration
Groups: Administration

Joined: 11/23/2008
Posts: 335
Points: 711
Location: Australia
1. Use style attributes directly
a. Horizontal centering
To make it center in Firefox/Chrome/Safari, use a wrapper. Wrap the form in a div section:
Code:
<div style="margin:0 auto;width:40%;text-align:left">


For IE, you will need to apply a style to the body:
Code:
<body style="text-align:center">


b. Both horizontal and vertical centering
Code:
style="margin-top:15%;margin-left:35%;padding-top:0px;"


2. Centering in CSS
a.
Code:
<style type="text/css">
div#center {
margin: 0 auto;
height: 30%;
width: 40%;
</style>


Put this around your form:

Code:
...
<div id="center">
<h2 style = "text-align:center">
...
</form>
</h2>
</div>
</body>


b.
Code:
<style type="text/css">
         form {
             height:400px;
             width:400px;
             position: absolute;
             left: 50%;
             top: 50%;
             background-color:#CCC;
             /* Set margins to offset 50% of the w/h */
             margin: -200px 0 0 -200px;
         }

See HTML to CSS: Center the page vertically and horizontally.

Also visit Dead Centre, Vertical Centering in CSS.
Back to top
 
Sponsor
Posted: Saturday, February 26, 2011 7:18:55 AM
Back to top
 
Users browsing this topic
Guest

Developer Forum » Software Engineering and Information Technology » Web Application Development » How to place a form at the center of screen?


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Main Forum RSS : RSS

ASPNET Theme created by Boskone (Dan Ferguson)
Powered by Yet Another Forum.net version 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.
This page was generated in 0.061 seconds.