CODEWITHSUNDEEP
htmlcssfieldset
Chris
Chris

Reputation: 12201

Center a field set with CSS

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.

Upvotes: 7

Views: 112282

Answers (5)

Ahmed
Ahmed

Reputation: 1

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">

Upvotes: 0

Rudresh Bhatt
Rudresh Bhatt

Reputation: 2025

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

Upvotes: 2

Ukheby
Ukheby

Reputation: 1

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

Upvotes: -1

Doozer Blake
Doozer Blake

Reputation: 7797

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/

Upvotes: 4

SeanCannon
SeanCannon

Reputation: 78046

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

Upvotes: 26

Related Questions