css "левый" не работает

у меня есть 2 divs, родитель и ребенок, я хочу, чтобы ребенок слева (левая граница) будет в центре родителя.

почему этот код не работает? это 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/

9
css html positioning

6 ответов

необходимо указать position to absolute или relative:

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

в CSS left работает только с позиционированными элементами.

цитата из 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 / Properties / left
11

вам нужно добавить position: absolute; для вашего CSS. left используется для абсолютного позиционирования.

в вашем случае:

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

использование:

margin-left: 50%;

или:

position:relative;
left:50%;
3

попробуйте сделать следующее:

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

Я думаю, что это может помочь вам решить вашу проблему.

2

могу ли я добавить, что если у вас нет % слева, ваши изображения будут либо продолжать стекаться, либо использовать левый зазор "между" краями исходного изображения. Это не было указано выше, и очень смущало.

0