How to center div

Question

I want to set center an outer div alignment. There is some inner div which float is set to left. So outer div is not aligned center my inner div css is :

.inner { 
  float:left; 
  margin:10px; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

Glad you pointed that out, rsplak. Otherwise I would have given him the solution straight away... — carlsb3rg, Mar 29 '11 at 12:01
Some people just don't appreciate the online communities. I usually fail at paying attention to that before answering. Thanks for pointing that out, rsplak. I'm going to start to look at that more often. — Sebolains, Mar 29 '11 at 12:08

score 0 · Answer 1 · answered Nov 06 '12 at 08:58

0

This is the simplest method:

Provided you set a fixed width, and the proper DOCTYPE of course, try this

    Margin-left:auto;
    Margin-right:auto;

Hope it helps.

answered Nov 06 '12 at 08:58

score 0 · Answer 2 · answered Mar 29 '11 at 12:01

0

Without any more detail in your question all I can suggest is

<div style='margin: 0px auto;'>Blah</div>

But it does rather depend on what else you have going on.

answered Mar 29 '11 at 12:01

Codecraft

8,291
4
28
45

score 0 · Answer 3 · answered Mar 29 '11 at 12:06

The easiest way is to set the horizontal margins to auto:

<div style="margin-left: auto; margin-right: auto;">Content</div>

But it depends on its float attribute as well. Since I don't know what else you have on your site, I can only recommend for you to try different float attributes (left, right, none).

Good luck! :)

score 0 · Answer 4 · answered Mar 29 '11 at 12:07

0

try:

<div align="center" style="clear:left"> 
...
</div>

answered Mar 29 '11 at 12:07

Alex Pacurar

5,801
4
26
33

clairesuzy · Accepted Answer · 2011-03-29T12:37:38.477

0

why is the inner div floated, if it's not needed just center the inner div?

.inner { 
  margin:10px auto; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

OR if inner is floated so it contains further floats.. then you could add overflow hidden to it

.inner { 
  overflow: hidden;
  margin:10px auto; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

or you could make inner into an inline block- and wrap it in a div with text-align: center;

<div class="outer">
<div class="inner"><span>float</span>the inner text</div>
<div class="inner"><span>float</span>the inner text</div>
<div class="inner"><span>float</span>the inner text</div>
<div>

.inner { 
  display: inline-block;
  margin:10px; 
  border:1px solid #898989; 
  padding:4px;  
  width:200px; 
  background-color:#f2f2f2;
}

.inner {display: inline !ie7;}

span {float: left; width: 50px; height: 50px; background: #ffe;}

.outer {text-align: center;}

edited Mar 29 '11 at 12:37

answered Mar 29 '11 at 12:28

clairesuzy

27,296
8
54
52

i floated inner div coz if i dont float inner div than it takes a break and i need to formats div like cells – Deepa Mar 29 '11 at 12:32
so do the last option, and put all your "side by side" or "cells" divs inside the outer div.. give them all a class of inner – clairesuzy Mar 29 '11 at 12:33
I've updated the last option code with an IE7 workaround and showing multiple cells in the outer div – clairesuzy Mar 29 '11 at 12:38
feel free to click the tick and or the up arrow - if the answer helped, you get rep too ;) – clairesuzy Mar 29 '11 at 12:41
ya sure i m new user for this site. – Deepa Mar 29 '11 at 12:43
thanks :) I'm new too it takes a minute to get used to.. it costs nothing to upvote and you (and me in this case) get rep when you accept! glad it helped! – clairesuzy Mar 29 '11 at 12:45

How to center div

5 Answers5