2

私はCSSを次のように使用しています：

.center
{
    width: 30%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
    right:0;
    left:0;
}

それなしでは機能しません

right:0;
left:0;

（私はここのコメントでその解決策を見つけました）

なんで？

4

3 に答える 3

4

さて、我慢してください...このすべては、ビジュアルフォーマットモデル、特に幅とマージンの計算方法に関係しています。

displayとのように、考慮に入れる必要のあることがいくつかあります（これらはすべて、CSS仕様のセクション10.3でposition確認できます）。

特にあなたの場合、絶対に配置された非置換要素について話しているので（画像や固有のサイズのものではないため）、セクション10.3.7絶対に配置された非置換要素です。

あなたのcssによると、あなたは定義された幅を持っているので、そうではなくauto、あなたの左と右のマージンは両方ともautoです。つまり、左/右の値は次のようになります。

自動ではなく左/右が定義されている場合、次のルールが適用されます。

'margin-left'と'margin-right'の両方が'auto'の場合、2つのマージンが等しい値を取得するという追加の制約の下で方程式を解きます（...）

左/右が定義されていないため、デフォルトで自動になっている場合は、次のルールが適用されます。

初め：

'margin-left'および'margin-right'の'auto'値を0に設定します（...）

2番：

静的位置を含むブロックを確立する要素の「方向」プロパティが「ltr」の場合は「左」を静的位置に設定し、そうでない場合は「右」を静的位置に設定します。次に、「左」（「方向」が「rtl」の場合）または「右」（「方向」が「ltr」の場合）を解きます。

したがって、左/右に特定の値を定義しないと、マージンが実際になり、プロパティ0の値に応じて、コンテナの左または右にdivが作成されることがわかります（あなたのcssdirectionに何かを置くことによってこれをテストhtml { direction:rtl; }してください、左/右が自動であるとき、divは左ではなく右に行くべきです）

ただし、値を指定した場合（ケース0の場合）、「2つのマージンは等しい値を取得します」は効果的に要素を中央に配置します。

それが役に立てば幸い！

于 2012-07-17T19:03:37.953 に答える
1

「絶対配置された要素の場合、top、right、bottom、および leftプロパティは、要素を含むブロックのエッジからのオフセット（要素が相対的に配置されるもの）を指定します。要素のマージンは、これらのオフセットの内側に配置されます。」

出典：MDN

それが機能する理由です-要素のオフセットを100％に拡大する属性leftと属性を設定することによって。rightそして、その100％の幅の内側ではmargin: auto、通常どおりに機能します。

于 2012-07-17T18:34:17.643 に答える
-1

「絶対」（サイト上の要素の位置を制御する場合に使用されます）と「自動」が表示されるのは少し意外です。それにもかかわらず、あなたはそれをする正当な理由があるかもしれません。あなたがスタイルを使用しているので、私は提案します

position: absolute;

スタイルを指定して中央に配置できます

left: 50%;
margin-left: -40px;

コンポーネントの幅が80ピクセルであると仮定します。

于 2012-07-17T18:21:56.090 に答える