Вопрос по ширине CSS: 100%

Question

Я хочу создать гибкий макет сетки (т. Е. Нигде не использовать значение пикселя) Теперь вот мой вопрос; Для внешнего контейнера, как правило, я использую

#container{width:1024px;margin:0 auto}

Это выравнивание по центру всей страницы. Теперь, когда я конвертирую то же самое в% на основе CSS, т.е.

#container{width:100%;margin:0 auto}

В этом случае страница не выравнивается по центру. Как мне исправить эту проблему?

Answer 1

Страница не может быть выровнена по центру, потому что она использует полную ширину браузера. попробуйте, например: "ширина: 80%", и вы поймете, о чем я говорю;

Answer 2

Ваш контейнер выравнивает по центру.Ширина 100% означает, что контейнер занимает всю ширину родительского контейнера (предположим, screen), поэтому пространство для полей равно 0 .Как правило, такие проблемы легко отследить с помощью применения границы к контейнерам.

Эту проблему можно решить, центрировав элементы внутри вашего контейнера с помощью text-align: center;

Answer 3

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

Answer 4

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

#container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

В этом случае ваш контейнер будет гибким и займет всю доступную ширину, если область просмотраимеет ширину менее 1024 пикселей, но не будет превышать 1024 пикселей (и будет выровнен по центру), если окно станет шире.