web-dev-qa-db-ja.com

css「左」が機能しない

親と子の2つのdivがあります。子の左側（左側の境界線）を親の中央に配置します。

このコードが機能しないのはなぜですか？あれは left: 50%子供用、動作していません。

<div id="outher">
    <div id="inner">

    </div>
</div>

css：

#outher {
   width: 1000px;
   height: 1000px;
   background-color: #ccc;
}

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   left: 50%;
}

デモ http://jsfiddle.net/vrse2/5/

htmlcsspositioning
12
Oto Shavadze

positionをabsoluteまたはrelativeに設定する必要があります。

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}
26
Paul Fleming

CSS leftは、配置された要素でのみ機能します。

W3Cから引用

Values  <length> | <percentage> | auto | inherit
Initial value   auto
Applies to  positioned elements
Inherited   No

試してみてください

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}

良い読み

  1. MDN：CSSリファレンス-left（Best IMHO）
  2. W3C：CSS /プロパティ/左
11
NullPoiиteя

CSSにposition: absolute;を追加する必要があります。 leftは絶対位置決めに使用されます。

あなたの場合：

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}
4
Mateusz Rogulski

以下で試してください：

HTMLパート：

<div id="outher">
    <div id="inner">

    </div>
</div>

CSSパート：

#outher {
    width: 1000px;
    height: 1000px;
    background-color: #ccc;
}

#inner {
    width: 400px;
    height: 300px;
    background-color: #090;
    left: 50%;  
    margin:0 auto;
    position: absolute;
}

これはあなたの問題を解決するのに役立つかもしれないと思います。

2
John Peter

左側に％がない場合、画像はスタックし続けるか、元の画像の端の「間に」左側のギャップを使用することを付け加えておきます。これは上で指摘されておらず、非常に混乱しています。

0
Michael McCrady