Используя ширину, макс ширину и margin: auto;
Как уже упоминалось в предыдущей главе; элемент уровня блока всегда занимает всю доступную ширину (тянется влево и вправо, насколько это возможно).
Установка width защитного элемента уровня блока будет препятствовать его от растягивания к краям его контейнера. Затем, вы можете установить границы для авто, горизонтально центру элемента внутри контейнера. Элемент будет занимать заданную ширину, а остальное пространство будет разделено поровну между двумя полями:
Примечание: Проблема с <div> выше имеет место , когда окно браузера меньше , чем ширина элемента. Браузер затем добавляет горизонтальную полосу прокрутки на страницу.
Используя max-width вместо этого, в этой ситуации, улучшит управляемость браузера маленьких окон. Это важно при создании сайта можно использовать на небольших устройствах:
Совет: Изменение размера окна браузера менее 500px в ширину, чтобы увидеть разницу между двумя дивы!
Вот пример из двух дивы выше:
пример
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Попробуй сам "