10

Web ページのコンテンツを中央に配置するためのさまざまなソリューションに完全に満足したことはありません。この<center>タグは 18 世紀半ばに廃止されましたが、妥当な代替案が見つかりません。具体的には、中心に配置された親 DIV が必要ですが、その左上隅に対して「絶対に」設定することができます。

すべてを再測定するwindow.onresize JavaScriptを使用せずにこれを達成する方法はありますか? それはかなり単純なアイデアのように思えます...物事を絶対に配置したいのですが、0,0座標をブラウザウィンドウの左上隅以外のものに相対的にしたいだけです。

今、私がしていることは、コンテンツを中央に配置するように div を設定してから、相対的な位置を調整することですが、これは非常に面倒です。

これに関するあらゆる考えを大歓迎します。

4

9 に答える 9

12 
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

単なるコード例ですが、.child 要素はすべてラッパーの 0,0 になります

絶対配置された要素は、最も近い位置相対の親に絶対配置されます。要素に相対位置を持つ親がない場合は、ドキュメントを使用するだけです。以下は、クラスのない例です (明確にするためにいくつかの色と幅のスタイルが追加されています)。

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>
于 2009-06-23T18:59:35.537 に答える
8

固執している場合はposition: absolute;、物を配置したい div を設定してposition: relative;、子要素の配置コンテキストにする必要があります。

絶対に配置された div を中央に配置するには、その幅を知る必要があります。次に、次の CSS を使用します。

#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative; /* creates a positioning context for child elements */
}

#child {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

そしてHTML：

<div id="wrapper">
    <div id="child">
        ....
    </div>
</div>

必要に応じて幅と左マージンを微調整できます (負の左マージンは、中央に配置する div の幅の半分にする必要があります#child。

他の人が言及したようmargin: 0 auto;に、幅が設定された要素を使用すると、中央に配置されます。

于 2009-06-23T19:12:53.137 に答える
3

「margin:auto」CSSタグを使用することで、中心に配置することができます。これは FF と Safari で機能します。div に幅とマージン auto を指定するだけで、親の幅が 100% の場合、この div は中央揃えになります。

これを IE で機能させるには、親で text-align:center 属性を使用してから、実際の中央の div で text-align left を使用する必要があります。

私の知る限り、絶対座標を 0,0 から他の調停点に変更する方法はありません。親戚は行く方法です。

于 2009-06-23T18:58:44.337 に答える
1

親で相対位置を使用し、同じ要素にプロパティを与えます。

margin: 0 auto;

親が配置され、その中に要素を絶対に設定できるはずです。

例：

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}
于 2009-06-23T19:11:31.940 に答える
1

最も簡単な方法:

#element {

position: absolute; /*Absolute Position*/

top: 0; 
left: 0;          /*Set the 4 coordinates to zero*/
bottom: 0; 
right: 0;

margin: auto;      /*Margin to Auto*/

height: 150px;   /*Set the Height and Width*/
width:150px;

background:green; /* Backgroung:optional*/

}

これにより、サイズに関係なく、真ん中に配置されます。

それが役立つことを願っています!

フィドルを参照してください: http://jsfiddle.net/kfPC6/

于 2013-10-16T15:09:34.113 に答える
1

タスクを理解していなかったかもしれませんが、使用できると思います

margin: 0 auto;

divを中央に配置するため

于 2009-06-23T18:59:35.880 に答える
0

text-align: center;プロパティは、以前の <center>ことを行い、それよりもはるかに優れています。

唯一のことは、使用するのが少し複雑だということです。一度コツをつかめば、なぜ以前はそんなに苦労していたのか不思議に思うでしょう！

ページ上の他の要素のプロパティと組み合わせて使用​​する必要があります。これは、開発者/設計者がCSSおよび新しいHTMLテクノロジで抱えている問題です。それは私たちのページ要素を提示するための強力な方法を私たちに与えますが、それをはるかに複雑で厳密にします。

マイク・ロビンソンの答えは確かにあなたがここで抱えている問題を解決します、そしてそれは素晴らしい例です。だが...

遭遇するすべてのケースで適切に使用する方法を示す答えは1つもないと思いますtext-alignが、CSSでのポジショニングがどのように機能するかを詳しく調べてみてください。

于 2009-06-23T19:53:45.067 に答える
0

0,0 が div に対して相対的になる場合、相対的な配置は必要ありませんか?

于 2009-06-23T18:57:12.310 に答える