css "trái" không hoạt động

Question

Tôi có 2 div, cha mẹ và con, tôi muốn con bên trái đó (đường viền trái) sẽ ở giữa cha mẹ.

Tại sao mã này không hoạt động? đó là left: 50% cho trẻ em, không hoạt động.

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

bản demo http://jsfiddle.net/vrse2/5/

Answer 1

Bạn cần phải thiết lập position để absolute hay relative:

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

Answer 2

Bạn cần phải thêm position: absolute; đến CSS của bạn. left được sử dụng để định vị tuyệt đối.

Trong trường hợp của bạn:

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

Answer 3

Sử dụng:

margin-left: 50%; 

Hoặc:

position:relative; 
left:50%; 

Answer 4

CSS left chỉ hoạt động với các yếu tố định vị.

Quoted from W3C

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

Hãy thử

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

---

Tốt đọc

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

Answer 5

Hãy thử Với điều sau đây:

HTML Part:

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

    </div> 
</div> 

CSS Phần:

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

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

Tôi nghĩ điều này có thể giúp bạn giải quyết vấn đề của mình.

Answer 6

Tôi có thể thêm rằng nếu bạn không có% ở bên trái, hình ảnh của bạn sẽ tiếp tục xếp chồng hoặc chúng sẽ sử dụng khoảng cách bên trái "giữa" các cạnh của hình ảnh gốc. Điều này không được chỉ ra ở trên, và rất khó hiểu.