Center a field set with CSS

Question

I'm trying to center a fieldset containing the login "username" and "password" fields to the center of the page. Here is what I have:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  float: left;
}

I want the fieldset to be centered in the window, regardless of window size. Googling produced nothing helpful, such as float: center or align: center attributes.

Answer 1

There is no float: center, only left and right. Float simply allows block level elements to line up horizontally by taking them out of their stack flow. It's similar to display:inline-block except it aligns them to the direction of the float.

What you want is to set the margins to auto. If you want to center align the nodes inside the fieldset, you can add text-align:center; to this:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}

Answer 2

The element wrapping it likely needs text-align: center; on it, and then you need to set the margins on the fieldset;

fieldset{
  //other stuff
  margin: 0 auto;
  text-align: left;
}

form
{
    text-align: center;
}

Sample: http://jsfiddle.net/CKqxQ/

Answer 3

just remove float:left and add margin: 0 auto; because float:left keeps your element to left of the parent element. (Assuming parent element width is more than 400px;) your new css would be as below.

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin: 0 auto;
}

Answer 4

You can also put the fieldset like that:

<div style="text-align:center">
    .......fieldset here........
</div>

Note: This affects also the alignment of the fieldset text, so if you want the text inside the fieldset to be aligned left or right, you can use:

<fieldset style="text-align:left">

Answer 5

Someone try this... actually,just use this coz it works!

fieldset {
  font-size:14px;    padding:5px;    width:500px;    line-height:1.8;    margin: 0 auto;    
 }