Avatar of duta
duta asked on

CSS: How to place a form in the center of screen?

Dear experts:

I have a simple form.

I would like to learn to use CSS to place the form in the center of the screen.

Thanks a lot!

<body>
<h1>   Registration Form </h1>
 
<form name="demo" onsubmit="return validateFormOnSubmit(this)" ]method = "GET"
action="http://young.scottswebservices.com">
<table summary="Demonstration form">
  <tbody>
  <tr>
    <td><label for="Name"> Name:</label></td>
    <td><input name="name" size="35" maxlength="50" type="text"  id = "name"></td>
  </tr>
  <tr>
    <td><label for="phone"> Phone:</label></td>
    <td><input name="phone" size="35" maxlength="25" type="text"  id = "phone"></td>
  </tr>
 
  <tr>
    <td><label for="email"> Email:</label></td>
    <td><input name="email" size="35" maxlength="30" type="text"  id = "email"></td>
  </tr>
 
  <tr>
    <td><label for="description"> Description </label></td>
    <td><input name="description" size="35" maxlength="25" type="text"  id = "description"></td>
  </tr>
 
 
  <tr>
    <td>
        <label for="subscribe"> Subscribe </label></td>
    <td><input name="subscribe" size="35" maxlength="50" type="checkbox"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>
</form>
 
 
</body>

Open in new window

CSS

Avatar of undefined
Last Comment
duta

8/22/2022 - Mon
Lotok

enclose the form in a div and give that div the following styles

margin-left:auto; margin-right:auto;
ASKER
duta

Thank you so much for your kind prompt tip.

By the way, I tried your tip as the follows. But it did not work.
I guess I did not follow your instruction fully.

Thanks!
<style type="text/css" media="all">@import "form.css";</style> 
 
 
____________form.css  ___________
 
 
#center
{margin-left:auto; margin-right:auto;}
__________________________________________
 
___________________index.html _____________________________
<html>
 
<head>
  <title></title>
 
 
 <script type="text/javascript" src="/myjava.js"></script>
 <style type="text/css" media="all">@import "form.css";</style>
 
 
</head>
 
<body>
<h1>   Registration Form </h1>
 <div id="center">
<form name="demo" onsubmit="return validateFormOnSubmit(this)" ]method = "GET"
action="http://young.scottswebservices.com">
<table summary="Demonstration form">
  <tbody>
  <tr>
    <td><label for="Name"> Name:</label></td>
    <td><input name="name" size="35" maxlength="50" type="text"  id = "name"></td>
  </tr>
  <tr>
    <td><label for="phone"> Phone:</label></td>
    <td><input name="phone" size="35" maxlength="25" type="text"  id = "phone"></td>
  </tr>
 
  <tr>
    <td><label for="email"> Email:</label></td>
    <td><input name="email" size="35" maxlength="30" type="text"  id = "email"></td>
  </tr>
 
  <tr>
    <td><label for="description"> Description </label></td>
    <td><input name="description" size="35" maxlength="25" type="text"  id = "description"></td>
  </tr>
 
 
  <tr>
    <td>
        <label for="subscribe"> Subscribe </label></td>
    <td><input name="subscribe" size="35" maxlength="50" type="checkbox"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>
</form>
</div>
 
 
</body>
</html>

Open in new window

shonk

You can always try giving the form a width in the CSS and using the margin auto on it, something like:

form {
width: 300px;
margin: 0 auto;
}

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
dzamfir

Hey, have a look here. There are a loots of CSS-based forms:

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
ASKER
duta

form {
width: 300px;
margin: 0 auto;
}

The above code did not work for some reason,

Do I need to give any script in the form in the .html file?


Thanks!
Lotok

Might not be working for a couple of reasons, your page doctype is missing. This tells the browser how to interpret markup and css.

Doctype example:
<!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">


Another possibility is your use of tables. I will have a look when back in office tomorrow and recreate your form in divs.

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
duta

Thanks a lot!
Anthony Pangilinan

I think if you use Lotok's solution, your div needs a defined width.
ASKER CERTIFIED SOLUTION
Lotok

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
duta

Still the form is not displayed in the center.

Thanks!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Lotok

It displays in the center for me. Using IE7.
What browser do you have?
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
duta

Thank you so much for patiently and kindly helping me out!