html - css「左」が機能しない

Question

親と子の 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/

Answer 1

またはに設定positionする必要があります。absoluterelative

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

Answer 2

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

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 リファレンス -左 (最高の IMHO)
2. W3C : CSS/プロパティ/左

Answer 3

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

あなたの場合：

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

Answer 4

使用する：

margin-left: 50%;

または：

position:relative;
left:50%;

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

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