10


3

絶対位置を中心にしたCSSのヘルプが必要

Webページのコンテンツを中央揃えにするためのさまざまな解決策に、私はまったく満足していません。 ++

tagは18世紀半ばに廃止されましたが、合理的な代替方法は見当たりません。 具体的に私が欲しいのは、中央にある親DIVを持っていることですが、その左上隅に対して、「絶対に」設定することができます。

window.onresize javascriptを使用せずにこれを実現する方法はありますか。 それはかなり率直な考えのようです…​ 私は物事を絶対に配置したい、私はちょうど0,0座標はブラウザウィンドウの左上隅以外の何かに相対的であることを望みます。

今のところは、divを設定してその内容を中心に配置してから、相対位置を指定してうどんをすることにしましたが、相対オブジェクトが相互に押し付け合っていないため、非常に面倒です。

これについてのありとあらゆる考えは大いに感謝しました。

9 Answer


12


body {text-align:center; #wrapper {width:960px;}マージン:0自動。 text-align:left。位置:相対; #wrapper .child {position:absolute;}左:0;トップ:0。 }

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

絶対的に配置された要素は、絶対的に最も近い位置に相対的な親に配置されます。 要素が相対位置を持つ親を持たない場合は、単に文書を使用します。 以下はクラスなしの例です(明確にするために色と幅のスタイルをいくつか追加しました)。

これはコンテナdivに対して絶対的な位置関係になります。 これは絶対にドキュメントに対して相対的に配置されます


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の幅の半分にする必要があります)。 +#child +

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


6


これはあなたが探しているものですか?

これはスクリプトなしで中心に置かれます:D


3


中心的なものにするには、 "margin:auto" cssタグを使うのがいいでしょう。 これはFFとSafariで動作します。 divに幅とマージンautoを与えるだけで、親の幅が100%の場合、このdivは中央揃えになります。

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

私の知る限りでは、絶対座標を0,0から他のアービトポイントに変更する方法はありません。 相対的な方法があります。


1


多分私はタスクを理解していなかったが、私はあなたが使用できると思います

マージン:0自動。

あなたのdivを中心に


1


親に対して相対位置を使用し、その同じ要素にプロパティを設定します。

マージン:0自動。

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

例:

div#page {位置:相対;幅:400ピクセル。マージン:0自動。 }

div#page#absoluteExample {位置:絶対;上:18ピクセル。左:100ピクセル。 }


1


最も簡単な方法:

#element {

位置:絶対/ *絶対位置* /

トップ:0。左:0; / * 4つの座標をゼロに設定します。* / bottom:0;右:0;

マージン:自動。 / *自動マージン* /

高さ:150ピクセル。 / *高さと幅を設定する* / width:150ピクセル。

背景:グリーン。 / *背景:オプション* /

}

大きさに関係なく、これで真ん中にきます。

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

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


0


0,0がdivに対して相対的になる場合、相対的な位置付けが必要ではありませんか。


0


`+ text-align:center; `プロパティは、 `+`を実行します

に慣れていて、それはそれより非常に優れています。

唯一のことは、使うのがもう少し複雑だということです。 いったんそれに慣れると、あなたはなぜ以前にそんなに多くの問題を抱えていたのだろうかと思うでしょう!

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

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

どのような場合でも、出会うすべてのケースで `+ text-align +`を適切に使用する方法を1つの答えが示すとは思わないが、CSSでのポジショニングがより詳細に機能する方法を調べてみてください。