絶対配置でのCSSセンタリングのヘルプが必要

StackOverflow https://stackoverflow.com/questions/1034449

  •  06-07-2019
  •  | 
  •  

質問

コンテンツをWebページに集中させるためのさまざまなソリューションに完全に満足したことはありません。 <center>タグは18世紀半ばに非推奨になりましたが、妥当な代替手段が見つかりません。具体的には、親DIVを中央に配置しますが、その左上隅に対して<！> quot; absolutely <！> quot;を設定できます。

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

今、私がやっていることは、コンテンツを中央に配置するようにdivを設定し、それから相対的な位置付けでうんざりすることです。

これに関するすべての考えは大歓迎です。

役に立ちましたか？

解決

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

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

他のヒント

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>

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;を使用すると、中心に配置されます。

ものを中央に配置する良い方法は、<！> quot; margin：auto <！> quot;を使用することです。 cssタグ。これはFFおよびSafariで機能します。 divにいくつかの幅とマージンautoを与えるだけで、親が100％幅の場合、このdivはそれ自体を中央に揃えます。

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

AFAIK、絶対座標を0,0から他の任意のポイントに変更する方法はありません。相対が行く方法です。

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

margin: 0 auto;

divの中央揃え

親の相対配置を使用し、同じ要素にプロパティを与えます：

margin: 0 auto;

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

例：

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

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}

最も簡単な方法：

#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/

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

text-align: center;プロパティは<center>を使用し、それよりもはるかに優れています。

唯一のものは、使用するのが少し複雑です。慣れてしまえば、以前はなぜこんなに苦労していたのか不思議に思うでしょう！

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top