Display fieldset data to center of page - html

Question

Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.

Answer 1

Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}

Answer 2

If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>