13

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

4

5 回答 5

30

您需要设置positionabsoluterelative

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}
于 2013-01-05T12:38:30.287 回答
11

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 参考 -left(最好的恕我直言)
  2. W3C:CSS/属性/左
于 2013-01-05T12:42:05.330 回答
6

您需要添加position: absolute;到您的 CSS。left用于绝对定位。

在你的情况下:

#inner {
   width: 400px;
   height: 300px;
   background-color: #090;
   position: absolute;
   left: 50%;
}
于 2013-01-05T12:38:36.787 回答
3

采用:

margin-left: 50%;

或者:

position:relative;
left:50%;
于 2013-01-05T12:39:12.910 回答
2

尝试以下方法:

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

我认为这可以帮助您解决问题。

于 2013-01-05T12:43:05.020 回答