Home/ Questions/Q 9197609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:06:36+00:00

I am trying center (to middle of the page) a html form using css.

  • 0

I am trying center (to middle of the page) a html form using css.

I already read other member’s somewhat similar questions.
But, I cannot figure this out

This is the HTML form:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</div>
</body>
</html>

and this is the CSS:

<style>
form{
  width: 700px ;
  margin-left: 0 auto;
}
label { 
    text-align:right; 
    width:100px; 
}
input { 
    margin-left: 10px; 
}
label.check, label.radio { 
    text-align:left; 
}
</style>

I tried quite some time.
But still I could not center the form.
Any guidence?
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The shorthand property is margin, not margin-left. Fix it, and it’ll be centered:

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

    Here’s the fiddle: http://jsfiddle.net/Tzr7D/

    • 0