Align a div to center

问题:

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

回答1:

There is no float to center per se. If you want to center a block element inside another do this:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

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.

回答2:

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.

回答3:

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.

回答4:

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

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

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

回答5:

Following solution worked for me.

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

回答6:

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

回答7:

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.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

回答8:

This worked for me..

div.className {
display: inline-block;
margin: auto;
}

回答9:

this could help you..:D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

回答10:

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.

回答11:

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

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

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.

回答12:

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

回答13:

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.

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

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

回答14:

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 :)