Блог

Главная - Вопросы по программированию - центрировать фоновое изображение в div с минимальной шириной, даже если страница меньше div

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

#css #width #background-image #center

#css #ширина #фоновое изображение #центрировать

Вопрос:

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. Например, обратите внимание, как изображение остается на экране, даже если внешний div исчезает с правой стороны экрана. jsfiddle.net/5Kn7s

2. На самом деле это действительно странно — jsfiddle.net/5Kn7s/1 Обратите внимание на красную рамку. Внешний div не растет вместе со своим дочерним контейнером??? Вот почему изображение остается центрированным на экране.

Ответ №1:

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

 #outer { min-width: 960px; }

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

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

 #outer { display: table-cell; }

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

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