3

重複の可能性:
異なる画面で div をセンタリングする CSS

この質問への答えは本当に簡単だと思いますが、私は困惑しています。

ガーディアン Web サイトのように、画面の中央に Web サイトを配置しようとしています - http://www.guardian.co.uk/。左右の境界線を使用するのは正しいと思いましたが、これによりフッターの配置が難しくなりました。

ガーディアンの Web サイトを見て、Firefox の要素検査機能を使用すると、画面の左右に div がまったく使用されていないように見えます。実際、コンテナは画面の真ん中にあるように見えます。

だから私は私の質問だと思います。コンテナをどのように配置しますか？

4

5 に答える 5

8 
.container {
    /* remember to set a width */
    margin-right: auto;
    margin-left: auto;
}

これがフィドルです：http：//jsfiddle.net/d9yBs/

2つのマージンプロパティに結合して、省略形を使用することもできます。

margin: 0 auto;

これにより、上下の余白が0に設定され、左右が自動に設定されます。

于 2013-01-18T15:27:46.803 に答える
2

簡単な方法は次のとおりです。

#container
{
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    margin-top: -100px /* half of you height */
    width: 400px;
    margin-left: -200px /* half of you width */
}

センタリングのみの別の方法は

#container
{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}
于 2013-01-18T15:27:18.747 に答える
0

これはCSSのトリックです。

margin: 0 auto;

保護者のサイトから：

div.InSkinAlignCenter {
margin: 0 auto;
}

私が覚えている限り、positionプロパティはに設定する必要がありますrelative

于 2013-01-18T15:29:28.883 に答える
0

HTML

<body>
  <div class="page_wrap">
  </div>
</body>

CSS

.page_wrap
{
    border: 1px solid black;
    width: 250px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
body
{
    text-align: center; /* required by some browsers */
}

http://jsfiddle.net/pc7AY/チェックしてみてください。

于 2013-01-18T15:30:46.733 に答える
-1

これを試して：

CSS：

.page {
    width: 200px;
    background: #FF0000;
    margin: auto;
}

HTML：

<div class="page">
    This is the content.
</div>

また、このjsFiddleをチェックしてください！

于 2013-01-18T15:28:29.207 に答える