| Kosten | Вторник, 31 Июля 2018, 02:49 | Сообщение 1 |
| Вопрос о том, как центрировать раскладку CSS в окне браузера, возникает очень часто. Кажется, каждый день появляется на форумах веб мастеров, которые вы возможно посещаете, где посвящают сообщение центрированию веб страниц, использующих макет CSS. Тот же метод, используемый для центра всей страницы, также будет работать, чтобы центрировать любой элемент уровня блока в макете поэтому если вы его узнаете, вы сможете центрировать все, где захотите, внутри ваших макетов css. Это также довольно просто изучить и использовать.
Автоматические поля для центрирования
С табличными макетами было довольно легко центрировать страницу, не так ли. Вы обернули тег center вокруг вашей основной таблицы и затем выровняли каждую ячейку таблицы, но вы хотели. Но теперь мы используем CSS и этот тег center устарел от языка. На самом деле путь CSS проще, где вам не нужно будет рассказывать все на странице, где выровнять.
С помощью CSS способ центрировать все, что является элементом уровня блока, это свойство margin. Одним из значений margin является auto и установив auto на левом и правом полях, наш элемент уровня блока будет центрироваться. Для элемента уровня блока мы обычно будем использовать div, но он будет работать и с любым другим элементом уровня блока. Есть еще две вещи, которые нам нужно добавить, чтобы сделать эту работу. Одним из них является использование надлежащего doctype, который мы рассмотрим немного.
Нашему элементу уровня блока нужна ширина, в противном случае он будет использовать значение по умолчанию 100%. При центрировании чего-то, что составляет 100% от ширины его содержащего элемента, он растянется к краям этого элемента. Технически он центрирован, но для нас он просто растянут до краев. До тех пор, пока вы указываете ширину, которая меньше ширины содержащего элемента, ваш элемент уровня блока будет центрирован внутри его контейнера.
Центрирование всей веб страницы
Одной из наиболее распространенных вещей, которые люди хотят сосредоточить, является сама страница. Чтобы сосредоточить свою страницу, вы хотите обернуть весь свой html одним элементом div и применить CSS к этой оболочке div. Содержащим элементом для обертки div будет тело, и поэтому обертка div будет центрирована внутри тела документа.
Ваш html будет выглядеть примерно так:
HTML
Код <body> <div id="container"> Весь ваш html для страницы </div> </body>
CSS
Код div#container {
width:760px;
margin:0 auto;
}
Здесь задано контейнеру div идентификатор обертки, хотя любое имя будет сделано. Здесь я установил div на ширину 760 пикселей, что довольно часто при проектировании для разрешения 800 × 600, а затем просто применил левое и правое поле со значением auto, используя ярлык для поля. Теперь весь div, который содержит весь код для вашей страницы будет сосредоточен внутри тела, тогда как все элементы внутри div все равно будут выровнены влево.
Центрирование элементов внутри макета CSS
Такую же технику можно использовать, чтобы сосредоточить все что угодно в вашем макете. Либо элемент, который вы хотите центрировать, уже будет элементом уровня блока, или вы обернете то, что хотите сосредоточиться в div и центре, чтобы обернуть div. Допустим, у вас есть заголовок в вашем макете, который растягивает 100% тела документа, но вы хотите центрировать название своей компании в заголовке div. Просто закрепите название своей компании в своей собственной оболочке div и используйте те же самые css, что и выше, чтобы установить ширину вместе с нашими автоматическими левыми и правыми полями.
Возможно ваш макет состоит из 2 столбцов с левым столбцом, содержащим меню, созданное с помощью простого неупорядоченного списка. Так же, как со страницей и названием компании, оберните div вокруг вашего неупорядоченного списка, дайте ширину div, которая меньше ширины столбца, и добавьте свои автоматические поля. Ваше меню будет сосредоточено в левом столбце, в то время как ссылки будут по-прежнему выровнены в списке.
Doctypes для центрирования
Вышеприведенный код будет работать без каких-либо других во всех браузерах, совместимых со стандартами. Конечно, мы все знаем, что есть один браузер, который не настолько уступчив, как хотелось бы. Да, старый добрый Internet Explorer. К счастью, исправление для IE - это то, что вы должны делать в любом случае, используя правильный doctype в начале вашего файла документа.
Вы действительно должны указывать доктрину, так что это не обязательно обвинять IE. Когда браузер возвращается в режим quirks, он просто предполагает, что вы не используете действительный код, а вместо этого - плохой код, который изначально сделал его в интернете. Браузер попытается интерпретировать ваши ошибки и исправит некоторые вещи для вас. Если вы не можете заставить вещи выглядеть правильно в Firefox, но они выглядят правильно в IE, это потому, что вы не указали doctype.
До тех пор, пока вы применяете один из них, надлежащий doctype IE будет в порядке с автоматическим значением свойства margin, и все будет как ожидалось. Если вы раньше не использовали доктрины, это было так же хорошо, как и любое другое. Он поставит вас на путь написания лучшего кода, который проверяет и улучшает ваши навыки как кодера.
Это действительно все, что нужно для центрирования вашей страницы и элементов в ваших макетах CSS. Оберните вещи на уровне блока div и примените ширины и авто поля. Не забудьте использовать правильный doctype так, как вам следует, и все вы настроены. Довольно простой и намного меньший код, чем с таблицами, так как вам не нужно менять выравнивание на все.
| | Страна: (RU) |
| |
