css「left」が機能しない

Question

私は2つのdiv、親と子を持っています。その子の左側（左の枠）は親の中心になります。

なぜこのコードは機能しませんか？子の場合はleft: 50%、動作していません。

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

    </div> 
</div> 

CSS：あなたはabsoluteまたはrelativeにpositionを設定する必要が

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

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

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

Answer 1

：

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

Answer 2

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

：

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

Answer 3

用途：

margin-left: 50%; 

または：

position:relative; 
left:50%; 

Answer 4

CSS leftのみ位置のエレメントで動作します。

Quoted from 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 Reference -left (Best IMHO)
2. W3C : CSS/Properties/left

Answer 5

次で試してみてください。

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; 
} 

あなたの問題を解決するのに役立つと思います。

Answer 6

％を左に付けていないと、イメージはスタックし続けるか、元のイメージのエッジの間に左のギャップを使います。これは上に指摘されておらず、非常に混乱していました。