Div не центрируется, когда установлена ​​минимальная ширина - PullRequest
Новая
       3

Div не центрируется, когда установлена ​​минимальная ширина

2 голосов
/ 12 января 2012

Я хочу веб-страницу с содержимым по центру и указываю минимальную ширину, чтобы она изменялась на небольших экранах смартфонов, но при этом выглядела отлично на ПК.

Если я установил ширину моего div в 1024pxи поля автоматически, тогда div остается центрированным, когда окно браузера растягивается шире.

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

Поэтому я попытался изменить ширину на "min-width: 480px", и div не остается в центре большого окна браузера.

Я сделал много поисков в Google и сообщений в блоге / форуме для этогоВ самой теме утверждается, что все, что вам нужно сделать, это установить минимальную ширину и автоматические поля. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
    *
    {
      padding:0;
      margin:0;
    }
    #content
    {
      margin: 0px auto;
      min-width: 480px;
      background:#BBB;
      height:800px;
    }
    </style>
  </head>
  <body>
    <div id="content">
      <span>content</span>
    </div>
  </body>
</html>

На данном этапе я тестирую только в Chrome.

Ответы [ 4 ]

2 голосов
/ 12 января 2012

Это потому, что min-width является ограничением, а не объявлением ширины. Автоцентрирование с использованием margin:0 auto требует только объявления ширины. Одним из предложений было бы просто определить ширину вашей #content области и добавить запрос @media для мобильных устройств с шириной 100%.

, например 

#content { width:960px; }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {
    #content {
        width:100%;
    }
}
2 голосов
/ 12 января 2012

Да, min-width сделает ваш div шириной 480px на маленьких экранах - это означает, что если экран меньше 480px, ваш div не поместится.

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

Я бы предложил посмотреть медиа-запросов

Надеюсь, это поможет!

1 голос
/ 12 января 2012

min-width вступит в действие, так как сообщается, что div на меньше , чем значение min-width. Если вы установите ширину div, равную width: 1024px;, то она всегда будет 1024px. Однако, если вы установите его в процентном значении (т. Е. 100%, 93,75% и т. Д.), Оно будет уменьшено, а значение минимальной ширины сработает один раз 100% < min-width. Так что установите ширину div в процентном значении, и все будет хорошо.

Кроме того, я не большой поклонник того, чтобы оборачивать весь мой контент в один всеобъемлющий контент div. Может быть, я просто привередлив, но имхо, для этого и нужен элемент <body></body>. И вы можете добавить margin: 0 auto; только к элементу Body, и это будет центрировать все относительно браузера. Тогда поля конкретных элементов оттуда до вас. В любом случае, пища для размышлений.

0 голосов
/ 12 января 2012

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

И вы не можете установить min-width, если у вас естьфиксированный width.

Как правило, у вас есть отдельный лист CSS только для мобильных устройств и используется медиа-запрос.

...