Страница сайта по центру

Страница сайта по центру

Центрирование вебсайта является основной многих CSS схем расположения. Существует множество разных способов и техник осуществления этого, однако в нашем уроке я расскажу Вам про методику использующую только CSS. Вам не надо будет бороться с процентами и Ваш сайт будет работать во всех современных браузерах.

Для начала необходимо будет сбросить установленные по умолчанию браузерами расстояния. У каждого браузера есть встроенные таблицы стилей, которые загружаются автоматически и являются основой для любых других таблиц стилей. У Firefox, например, по умолчанию значение margin для тега body равняется 8-ми пикселям. Ниже представлен самый простой способ обнулить все необходимые для нашего примера значения.

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

Я буду использовать для нашего урока слой с идентификатором “wrapper”. Вы можете задать любую ширину (но помните о расширении мониторов Ваших посетителей). Я решил сделать ширину 960 пикселей, что подходит для разрешений выше средних (1024х768). Снизу Вы можете увидеть структуру страницы:

Для начала мы назначим слою #wrapper стиль, который будет центрировать его в браузере. Это сделано используя параметр margin. Не забудьте указать ширину слоя #wrapper или же элемент не будет центрирован. Трудно центрировать то, что занимает 100% ширины. Для удобства тестирования Вам необходимо также назначить другой цвет фона и высоту к слою #wrapper. Это поможет Вам увидеть результат.

С Internet Explorer не все так просто. Для правильного результата нам необходимо добавить еще следующий стиль (необходимо выровнять текст по центру, для того чтобы слой выровнялся по центру в Internet Explorer):

Тег body включает в себя wrapper, и поэтому выравнивание текста передается и на него. Обычно необходимо, чтоб текст был слева, поэтому нам необходимо добавить это условие в стиль #wrapper:

Читайте также:  Восстановление разметки жесткого диска

Все — мы закончили! Этот маленький блок CSS поможет Вам центрировать любой сайт, только подстройте ширину под себя. Весь код выглядит так:

Верстка и выравнивание по центру страниц сайта является делом творческим и у начинающих часто вызывает трудности. Поэтому давайте посмотрим, как это сделать. Предположим, мы хотим сделать страницу такой структуры:

Наша страница состоит из четырех блоков: шапки (header), меню (menu), содержимого (content) и низа сайта (footer). Для выравнивания по центру страницы мы поместим эти четыре блока в один главный блок (main):

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

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

Здесь можно сделать так, самому каркасу задаем значение, что отвечает за ширину. И сразу подключаем отступы, чтоб все автоматически поставить, то за это отвечает значение auto, где после установки каркас автоматом найдет место, которое будет поровну, как по левому, так и по правому краю. Этим мы достигаем точное выравнивание элемента по центру, где будет любое значение ширины, которое вы зададите.

Ссылка на основную публикацию
Сталкер зов припяти лучшее оружие в игре
S.T.A.L.K.E.R.: Call of Pripyat 4,260 уникальных посетителей 105 добавили в избранное "Уникальная модель пистолета СИП-т М200. Была выпущена малой партией...
Соевый соус стебель бамбука классический отзывы
Всем доброго дня!Много мнений по этому поводу, как вы считаете, соевый соус или морская соль, что менее вредно для организма....
Соевый соус ямаса отзывы
Полное наименование: Соевый Соус классический (натурально сваренный) Изготовитель: Yamasa Corporation Все характеристики Соевый соус Yamasa: Результаты теста Достоинства Безопасный Не...
Сталкер зов припяти много оружия
Для Всех любителей отличного отечественного шутера S.T.A.L.K.E.R.Зов Припяти представлен новый Оружейный мод Автоматы Штурмовые винтовки:1. АК-472. АКS-47 тактический3. АК-113 "Монгол"4....
Adblock detector