css “left” not working

问题:

I have 2 divs, parent and child, I want that child left side (left border) will in center of parent.

Why this code not working? that is left: 50% for child, is not working.

<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/

回答1:

You need to set position to absolute or relative:

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

回答2:

CSS left only works with positioned elements.

Quoted from W3C

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

Try

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

---

Good read

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

回答3:

You need to add position: absolute; to your CSS. left is used for absolute positioning.

In your case:

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

回答4:

Use:

margin-left: 50%;

Or:

position:relative;
left:50%;

回答5:

Try With the following :

HTML Part :

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

    </div>
</div>

CSS Part :

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

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

I think this may help you to resolve your problem.

回答6:

May I add that if you do not have the % on the left, your images will either continue to stack, or they will use the left gap "between" the edges of the original image. This was not pointed out above, and very confusing.