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;
}