12

CSSのみを使用してxhtml要素を中央に配置するための私のお気に入りの方程式は次のとおりです。

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

それをサポートするブラウザには、より単純なmargin：autoメソッドもあります。他の誰かがコンテンツをそのコンテナの中央に表示するように強制するトリッキーな方法を持っていますか？（垂直センタリングのボーナスポイント）

編集-おっと、マージン左の1つの「負の」部分を忘れました。修繕。

4

9 に答える 9

12 
div #centered{
 margin: 0 auto;
}

経験上一番信頼できると思います。

于 2008-09-29T11:05:37.420 に答える
6

マージンに固執する：0自動; 水平方向の配置用。垂直方向の位置合わせも必要な場合は、position：absoluteを使用します。トップ：50％; margin-top：-（width / 2）px; ただし、コンテナの幅が画面よりも広い場合、Position：absoluteメソッドを使用すると、コンテナの一部が左側の画面から外れます。

于 2008-09-29T11:52:47.463 に答える
5

まあ、それは大規模なやり過ぎのように思えます、私は言わなければなりません。text-align:center;私はコンテナを古いブラウザmargin:auto;用、最新のブラウザ用に設定し、そのままにしておく傾向があります。次に、要素のtext-alignをリセットします（テキストが含まれている場合）。

もちろん、ブロックとして設定する必要があるものもあれば、幅を設定する必要があるものもあります...しかし、これほど多くのハッキングが必要なスタイルを作成しようとしているのは一体何ですか？

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>
于 2008-09-29T11:00:14.157 に答える
3

Margin:auto は、IE が標準モードであることを確認している限り、すべてのブラウザーで機能します。

他のものよりもうるさいので、ドキュメントの最初に doctype を配置する必要があります。つまり、その前に空白 (スペース、タブ、または改行) があってはなりません。

その場合は、margin:auto が最適です。:)

于 2008-09-29T11:11:59.467 に答える
1

margin：auto;に注意してください。この方法は、ブラウザが中央に配置されるアイテムの幅と親コンテナの幅を計算できる場合にのみ機能します。多くの場合、width：auto;を設定します。動作しますが、動作しないものもあります。

于 2008-09-29T11:17:39.670 に答える
1

50％アプローチの絶対測位には深刻な副作用があり、ブラウザウィンドウが狭い場合、要素の一部がブラウザの左側に表示され、スクロールする方法がありません。

自動マージンに固執します-それらははるかに信頼性があります。

標準モードで作業している場合（そうあるべきです）、気になる可能性のあるすべてのブラウザーでサポートされています。

Internet Explorer 5.5以前を本当にサポートする必要がある場合は、text-alignハックを使用できます。

于 2008-09-29T11:35:55.400 に答える
1

これはCSSトリックの便利なブックマークです

http://css-discuss.incutio.com/

センタリングのトリックもたくさん 含まれています。

于 2008-09-29T11:53:09.337 に答える
-1 
body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

これは、通常のすべてのブラウザでうまく機能します。すでに述べたようmargin: 0 auto;に、IEのすべての半現在のバージョンで機能するわけではありません。

于 2008-09-29T12:37:43.627 に答える
-2

これを試して; IEで動作するかどうかはわかりませんが、Fxでは正常に動作します。CSSのみ（JavaScriptなし）を使用してDIVブロックをページの中央に配置し、margin-autoを使用せず、DIVブロック内のテキストは引き続き左揃えになります。垂直方向のセンタリングもそのように機能するかどうかを調べようとしていますが、これまでのところ成功していません。

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>
于 2008-09-29T11:37:28.017 に答える