How do I align a div in CSS?

Question

I have a box that I made in CSS and I want it to be aligned to the center. Unfortunately I have looked all over and cannot find an answer that works.
HTML:

<div id="top_bar">
        <div class="inner">

        </div>
</div>

CSS:

#top_bar {
vertical-align:text-top;
width: 90%;
/*padding: 10px;*/
border: 3px solid gray;
/*margin: auto;
margin-left: auto;
margin-right: auto;*/
position: fixed;
bottom: 0px;
}

#top_bar .inner {
  padding:10px;
}

body { margin-left:0px; }

That doesn't work. It just makes my bar not be stuck at the bottom(I am moving it to the top after). — Marcus S, Nov 04 '11 at 14:31

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

remove position:fixed, see this question for more info

edited May 23 '17 at 12:11

Community

1
1

answered Nov 04 '11 at 14:28

derek

4,826
1
23
26

score 1 · Answer 2 · answered Nov 04 '11 at 14:25

1

#top_bar{
  margin:0 auto;
  /* Others .... */
}

answered Nov 04 '11 at 14:25

Riz

9,703
8
38
54

The block should have fixed with to use that. – unclenorton Nov 04 '11 at 14:27
If position is needed to be fixed and width = 90%, just set left:5%; – Riz Nov 04 '11 at 14:30
Oh, I actually oversaw `width=90%` in OP's CSS, sorry. – unclenorton Nov 04 '11 at 14:32

score 0 · Answer 3 · answered Nov 04 '11 at 14:26

0

Maybe try putting margin: auto on the inner div

answered Nov 04 '11 at 14:26

rogerlsmith

6,670
2
20
25

score 0 · Answer 4 · answered Nov 04 '11 at 14:30

Here is a working sample.

If a parent element like #wrapper in this case has text-align:center and the #content container inside has margin: 0 auto;, it'll center. You can play with this jsFiddle to get a feel for what different rules will do, and apply what you learn to your code above.

In your code above, position: fixed is forcing the container to a position. It'll need to be removed for centering to work as I've shown in my sample.

How do I align a div in CSS?

4 Answers4