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.

use 'margin:auto' instead of float – hollandben Oct 26 '11 at 02:21 — hollandben, Oct 26 '11 at 02:21

score 25 · Accepted Answer · answered Oct 26 '11 at 02:20

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

Haha no worries man. The downvote wasn't from me. +1 to balance that out :) — AlienWebguy, Oct 26 '11 at 02:57

score 4 · Answer 2 · answered Oct 26 '11 at 02:22

4

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/

answered Oct 26 '11 at 02:22

Doozer Blake

7,677
2
29
40

Setting the text-align on the wrapping element would be extraneous if the fieldset is displayed block level with auto left and right margins. – lsuarez Oct 26 '11 at 02:36
@lthibodeaux Some older versions of IE can have troubles without it, so I normally place it in. It is extraneous though for any newer browsers. – Doozer Blake Oct 26 '11 at 03:00
That is not solving the problem. Only the wrapping parent is adjusted to the center. The content will not be centered to the center of the component – Pwnstar Dec 05 '16 at 11:39

score 2 · Answer 3 · answered Mar 16 '17 at 05:44

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

score 0 · Answer 4 · edited Feb 12 '18 at 12:04

0

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

edited Feb 12 '18 at 12:04

Adeel

2,901
7
24
34

answered Feb 12 '18 at 11:18

Ahmed

1

score -1 · Answer 5 · edited Oct 15 '14 at 12:45

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

edited Oct 15 '14 at 12:45

Bhumi Shah

9,323
7
63
104

answered Oct 15 '14 at 12:42

Ukheby

1

1

The line that's important is `margin: 0 auto;` which is already mentioned by both previous answer. So what value does this answer add? – EWit Oct 15 '14 at 13:04

Center a field set with CSS

5 Answers5

Linked