Align a div to center

Question

I want to float a div to center  Is it possible  text-align  center is not working in IE

User · Answer

One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.

so my html is this

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

and then I center the captions in jQuery like this

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

User · Answer

No  it isn t   You can either have content bubble up to the right of an element  float  left  or to the left of an element  float  right   there is no provision for having content bubble up on both sides

User · Answer

There is no float to center per se  If you want to center a block element inside another do this    lt div id  outer  gt     lt div id  inner  gt Stuff to center lt  div gt   lt  div gt    with    outer   width  600px     inner   width  250px  margin  0 auto      Now that won t make the text wrap around it  like it would with a float left or right  but like I said  there is no float center

User · Answer

Following solution worked for me      algncenterdiv       display  block      margin-left  auto      margin-right  auto

User · Answer

floating divs to center  works  with the combination of display inline-block and text-align center   Try changing width of the outer div by resizing the window of this jsfiddle   lt div class  outer  gt       lt div class  block  gt one lt  div gt       lt div class  block  gt two lt  div gt       lt div class  block  gt three lt  div gt       lt div class  block  gt four lt  div gt       lt div class  block  gt five lt  div gt   lt  div gt    and the css    outer       text-align center      width  50       background-color lightgray      block       width  50px      height  50px      border  1px solid lime      display  inline-block      margin   2rem      background-color  white

User · Answer

Use  spacer  divs to surround the div you want to center  Works best with a fluid design  Be sure to give the spacers height  or else they will not work    lt style gt  div row width 100    dvi row div float left    content width 80    div spacer width 10   height 10px    lt  style gt    lt div class  row  gt   lt div class  spacer  gt  lt  div gt   lt div id  content  gt     lt  div gt   lt div class  spacer  gt  lt  div gt   lt  div gt

User · Answer

this could help you   D   x000D   x000D  div outer   x000D    width 200px  x000D    height 200px  x000D    float left  x000D    position fixed  x000D    border solid 5px red  x000D    x000D  div inner   x000D    border solid 5px green  x000D    x000D   lt div id  outer  gt  x000D     lt center gt  x000D       lt div id  inner  gt Stuff to center lt  div gt  x000D     lt  center gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

this works nicely  width 40      the width of the content div right 0  margin-right 30      1 2 the remaining space   This resizes nicely with adaptive layouts also    CSS example would be    centered-div      position fixed     background-color  fff     text-align center     width 40      right 0     margin-right 30

User · Answer

lt div id  outer  style  z-index 10000 width 99  height 200px margin-top 300px margin-left auto margin-right auto float left position absolute opacity 0 9   gt    lt div id  inner  style  opacity 1 background-color White width 300px height 200px margin-left auto margin-right auto   gt Inner lt  div gt  lt  div gt    Float the div in the background to the max width  set a div inside that that s not transparent and center it using margin auto

User · Answer

This has always worked for me   Provided you set a fixed width for your DIV  and the proper DOCTYPE  try this  div             margin-left auto    margin-right auto      Hope this helps

User · Answer

This worked for me    div className   display  inline-block  margin  auto

User · Answer

This worked for me    I included an unordered list on my page twice   One div class  menu  id  vertical  the other to be centered was div class  menu  id  horizontal   Since the list was floated left  I needed an inner div to center it  See below    lt div class menu id  horizontal  gt   lt div class  fix  gt    Centered stuff  lt  div gt   lt  div gt    menu horizontal   display  block   float  left  margin  0px  padding  0 10px  position  relative  left  50      fix   float  right  position  relative  left  -50   margin  0px auto

User · Answer

Try this  it helped me  wrap the div in  tags  the problem is that it will center the content of the div also  if not coded otherwise   Hope that helps

User · Answer

The usual technique for this is margin auto  However  old IE doesn t grok this so one usually adds text-align  center to an outer containing element  You wouldn t think that would work but the same IE s that ignore auto also incorrectly apply the text align center to block level inner elements so things work out   And this doesn t actually do a real float

[html] Align a div to center

Examples related to html

Examples related to css

Examples related to margin

Examples related to center-align