центрируйте фоновое изображение в div, который имеет минимальную ширину, даже если страница более узкая, чем div - PullRequest
Новая
       27

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

1 голос
/ 12 ноября 2011

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

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

1 Ответ

0 голосов
/ 12 ноября 2011

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

#outer { min-width: 960px; }

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

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

#outer { display: table-cell; }

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

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

...