Расположение div по центру и другие тонкости позиционирования

  1. Статьи
  2. Верстка сайта
  3. Практика
0 ∞

Если разрезать любой сайт, созданный на основе html, то перед вами предстанет некая послойная структура. Причем своим внешним видом она будет схожа со слоеным пирогом. Если вам так кажется, то вероятнее всего вы давно не ели. Поэтому сначала утолите свой голод, а затем мы поведаем вам о том, как расположить слой div по центру вашего сайта:

Содержание

Преимущества верстки с помощью тега <div>

Существует два основных типа построения структуры сайта:

  • Табличная;
  • Блочная.

Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

При использовании табличной верстки веб-страница не будет отображаться вплоть до полной загрузки. В то время как при использовании блоков div элементы отображаются сразу.


Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html. В том числе и за счет использования классов CSS.

Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.

Блочное построение на основе тегов <div> также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно размещать один поверх другого подобно слоям в Photoshop.

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение <div>, является float.
Синтаксис свойства:
float: left | right | none | inherit,
Где:

  • left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
  • right – выравнивание справа, обтекание остальными элементами – слева;
  • none – обтекание не допускается;
  • inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

<style type="text/css">
#left {
    width: 200px;
height: 100px;
    float: left; 
    background: rgb(255,51,102);  
   }
#right { 
    width: 200px;
height: 100px;
    float: right;  
    background: rgb(0,255,153);  
   } 
 </style>
 </head>
<body>
<div id="left">
<h1>Левый блок</h1>
</div>
<div id="right">
<h1>Правый блок</h1>
</div>
</body>
JavaScript: slice и другие методы для работы с подстроками
Средства позиционирования

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center. А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left:

Средства позиционирования - 2

Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру.

Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto):

<style type="text/css">
#container {
    width: 600px;
    margin: 0 auto;
}
#left {
    width: 200px;
	height: 100px;
    float: left; 
    background: rgb(255,51,102);  
   }
#right { 
    width: 200px;
	height: 100px;
    float: left;  
    background: rgb(0,255,153);  
   } 
#center { 
    width: 200px;
	height: 100px;
    float: left;
    background: rgb(255,0,0);  
   } 
   </style>
 </head>
<body>
<div id="container">
<div id="left">
<h1>Левый блок</h1>
</div>
<div id="center">
<h1>Центральный блок</h1>
</div>
<div id="right">
<h1>Правый блок</h1>
</div>
</div>
</body>
Перемещаемые элементы, которые при перетаскивании раздвигают другие элементы
Центрирование слоев

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его). То есть после редактирования его css класс должен выглядеть вот так:

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

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

Центрирование слоев - 2

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css:

<style type="text/css">
#container {
    width: 450px;
	height:150px;
	margin:0 auto;
	background-color:#66CCFF;
	}
#left {
	width: 100px;
	height: 100px;
    background: rgb(255,51,102);
	display: inline-block;
    vertical-align: middle;
	margin-left: 35px;
	 }
#right { 
width: 100px;
	height: 100px;
    background: rgb(0,255,153);
	display: inline-block;
    vertical-align: middle;
	margin-left: 35px;
	} 
#center {
    width: 100px;
	height: 100px;
    background: rgb(255,0,0);
	display: inline-block;
    vertical-align: middle;
	margin-left: 35px;
	} 
</style>

Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div:

  • display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
  • vertical-align: middle – выравнивает элемент посредине относительно родительского;
  • margin-left – устанавливает отступ слева.
Представляем вашему вниманию инструмент адаптивной настройки шрифтов для веб-проектов FlowType.JS

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

<style type="text/css">
#layer1{
width: 500px; 
height: 100px; 
background: rgb(51,255,204);
border:groove;
}
a {
display: block; 
text-align: center; 
height: 100%;
color: rgb(255,0,51);
}
</style>
</head>
<body>
<div id="layer1">
<a href="https://www.internet-technologies.ru">Ссылка на наш сайт</a>
 </div>
</body>
Как из слоя сделать ссылку

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height: 100%.

Скрытие и отображение блочных элементов

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

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть» еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

<style type="text/css">
#layer1{
	display:block;
    width: 500px; 
     height: 100px; 
     background: rgb(51,255,204);
     border:groove;
}
</style>
<script type="text/javascript">
function show()
{
     if(layer1=="none")
    {
        layer1="block";
      }
    else
    {
        layer1="none";
  }
 document.getElementById("layer1").style.display=layer1;
    }
</script>
 </head>
 <body>
 <input type="button" onclick="show()" value="Волшебная кнопка"/>
<div id="layer1">
 <p>Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.</p>   
 </div>
 </body>
Скрытие и отображение блочных элементов

В данном примере расположение div блоков никак не меняется. Здесь используется простейшая функция JavaScript, меняющая значение свойства css display после нажатия на кнопку (событие onclick).

Синтаксис display:
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Как видите, данное свойство может принимать множество значений. Поэтому является очень полезным и может использоваться для позиционирования элементов. В одном из предыдущих примеров с помощью одного из его значений (inline-block) мы реализовали выравнивание div внутри div по центру.

Для скрытия и показа слоя мы использовали два значения свойства display:

  • none – временно удаляет блочный элемент со страницы;
  • block – показывает элемент как блочный.

Еще одним средством css, позволяющим скрывать и показывать элемент, является свойство visibility. Но оно обладает большим недостатком.

Свойство visibility позволяет лишь скрыть элемент. Но практически он присутствует на странице. Поэтому расположить на его месте другой элемент не получится. В то время как свойство display полностью удаляет (на время) элемент и позволяет располагать на его месте другие блочные структуры.


Мы с вами рассмотрели все основные слои настоящего сайта. Надеемся, что полученные знания позволят вам «испечь» по-настоящему вкусный ресурс.

Виталий Черкасовавтор