центрировать фоновое изображение в div с минимальной шириной, даже если страница уже, чем div

HTML

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

css

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

Этот код хорошо центрирует мое фоновое изображение, за исключением случаев, когда мой браузер становится уже, чем ширина 960 пикселей #inner. В этом случае с узким браузером #inner и #outer сохраняют свою ширину 960 пикселей, как и ожидалось (предоставляя горизонтальную полосу прокрутки браузера), но фоновое изображение в #outer центрируется в окне браузера, а не в блоке #outer. Как я могу поддерживать фоновое изображение в центре div, а не в окне браузера?


css background-image center width
person Sean    schedule 12.11.2011    source источник
comment
Например, обратите внимание, как изображение остается на экране, даже если внешний div выходит за правую часть экрана. jsfiddle.net/5Kn7s   -  person mrtsherman    schedule 12.11.2011
comment
На самом деле это действительно странно - jsfiddle.net/5Kn7s/1 Обратите внимание на красную рамку. Внешний div не растет вместе со своим дочерним контейнером??? Вот почему изображение остается в центре экрана.   -  person mrtsherman    schedule 12.11.2011

Ответы (1)


arrow_upward
0
arrow_downward

На самом деле я не знаю точного ответа на вопрос, почему это происходит, но если вы примените ширину к external, теперь она будет отображаться так, как вы этого хотите. Однако я не думал, что эта модель работает. Очень смущенный :/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

Хорошо, это тоже работает, но не поддерживается IE7 или IE6.

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

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

person mrtsherman    schedule 12.11.2011