css "left" funktioniert nicht

Question

Ich habe 2 divs, Eltern und Kind, ich will das Kind links (linke Grenze) wird in der Mitte des Elternteils.

Warum funktioniert dieser Code nicht? das ist left: 50% für Kind, funktioniert nicht.

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

Demo http://jsfiddle.net/vrse2/5/

Answer 1

Sie müssen position zu absolute oder relative einzustellen:

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

Answer 2

Sie müssen position: absolute; zu Ihrem CSS hinzuzufügen. left wird für die absolute Positionierung verwendet.

In Ihrem Fall:

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

Answer 3

Verwendung:

margin-left: 50%; 

Oder:

position:relative; 
left:50%; 

Answer 4

CSS left funktioniert nur mit positionierten Elementen.

Quoted from W3C

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

Versuchen

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

---

Gut lesen

1. MDN : CSS Reference -left (Best IMHO)
2. W3C : CSS/Properties/left

Answer 5

versuchen, mit dem folgenden:

HTML-Teil:

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

    </div> 
</div> 

CSS Teil:

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

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

Ich denke, das kann Ihnen helfen, Ihr Problem zu lösen.

Answer 6

Darf ich hinzufügen, dass, wenn Sie nicht% auf der linken Seite haben, Ihre Bilder entweder weiter gestapelt werden, oder sie verwenden die linke Lücke "zwischen" den Kanten des Originalbildes. Dies wurde oben nicht erwähnt und ist sehr verwirrend.