web-dev-qa-db-ja.com

CSSでdivを中央に配置

ニューススライダー（divの下部コンテナー内）をこのページの中央に配置しようとしています：

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

私は既に持っています text-align: center;

それでも動作しません。

助言がありますか？

csshtmlcenter
29
Luuk

text-align: center;は、要素自体ではなく、要素のインラインコンテンツのみを中央揃えにします。

block要素 （a div is）の場合は、margin: 0 auto;を設定する必要があります。そうでない場合は、 inlineelement の場合、代わりにparent要素にtext-align: center;を設定する必要があります。

margin: 0 auto;は上下の余白を0に設定し、左右の余白をauto（同じサイズ）に設定して、自動的に中央に配置します。これは、問題のブロック要素に既知のwidth（固定または相対）がある場合にのみ機能します。それ以外の場合は、開始位置と終了位置を特定できません。

60
BalusC

片道：

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

より良い方法：

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

MyDIVのCSS：

#myDiv{
margin:0px auto;
}
3
ant

text-alignは、ブロック要素の中央揃えには使用しないでください。 （IE6を除くが、これは バグ ）

ブロックの幅を固定してから、margin：0autoを使用する必要があります。

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

そして

<div id="#block">Some text... Lorem ipsum</div>
3
Boris Guéry

提供された幅が設定され、適切なDOCTYPEを配置します。

これを試して：

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

お役に立てれば

1
user1583439

私はいつも使っています

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

追加

margin:auto;
1
John Boker

使用する text-align: centerコンテナの場合、display: inline-blockラッパーdivの場合、およびdisplay: inlineブラウザ間で幅が定義されていないコンテンツを水平方向に中央揃えするコンテンツdivの場合：

    <!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>
1
Paul Sweatte

これを試して：

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

それはあなたのフッターのdivを中央に置くべきです。

0
tahdhaze09

これをスタイルに追加してみてください。

margin-left: auto;
0
Steve Danner