Center a div in CSS [closed]

问题

I'm trying to center the newsslider (in the div bottom-container) on this page:

http://www.luukratief-design.nl/dump/parallax/index.html

I already have text-align: center;

Still it does not work.

Any suggestions?

回答1:

The text-align: center; only centers the element's inline contents, not the element itself.

If it is a block element (a div is), you need to set margin: 0 auto;, else if it is an inline element, you need to set the text-align: center; on its parent element instead.

The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto (of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width (either fixed or relative), else it cannot figure where to start and end.

回答2:

text-align should not be used to center a block element. (except in IE6, but this is a bug)

You have to fix the width of the block, then use margin: 0 auto;

#block
{
   width: 200px;
   border: 1px solid red;
   margin: 0 auto;
}

and

<div id="#block">Some text... Lorem ipsum</div>

回答3:

One way :

<div align="center">you content</div>

Better way:

<div id="myDiv">you content</div>

CSS for myDIV:

#myDiv{
margin:0px auto;
}

回答4:

add

margin:auto;

回答5:

i always use

<div align="center">Some contents......</div>

回答6:

Provided width is set, and you put a proper DOCTYPE,

Try this:

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

Hope this helps

回答7:

Use text-align: center for the container, display: inline-block for the wrapper div, and display: inline for the content div to horizontally center content that has an undefined width across browsers:

    <!doctype html>
    <html lang="en">
    <head>
      <style type="text/css">

    /* Use inline-block for the wrapper */
    .wrapper { display: inline-block; }

    .content { display:inline; }

    .container { text-align:center; }

    /*Media query for IE7 and under*/

    @media,
      {
      .wrapper { display:inline; }
      }
        </style>

        <title>Horizontal Centering Test</title>
    </head>

    <body>

      <div class="container">
        <div class="content">
            <div class="wrapper">
              test text
            </div>
        </div>
      </div>
    </body>
    </html>

回答8:

Try adding this to the style.

margin-left: auto;

回答9:

Try this:

#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
float:none;
height:137px;
margin:0 auto;
padding-top:14px;
width:296px;
}

That should center the div in your footer.

回答10:

Create a table with single row and three columns, set left and right width to 100% and voila, the middle one gets centered automatically

来源：https://stackoverflow.com/questions/2281087/center-a-div-in-css

标签

css

html

center