- Бочарникова Н. И.
- Уроки по HTML (основы)
- Просмотров: 8553
5 способов выравнивание блоков div по центру при помощи CSS
Способов выравнивания блоков довольно много. Каждый выбирает для себя более привычный. Я опишу 5 способов, выбирайте наиболее подходящий.
- Самый простой способ – с использованием стиля margin:10px auto 5px;
Его можно применять для выравнивания одного блока. Два и более блока в этом случае будут располагаться вертикально.
стиль:
.blk1 { /* выравнивание блоков по центру */
margin:10px auto 5px;
/* эти стили на выравнивание не влияют */
width: 400px;
background-color:#CCC;
border: 1px solid #999;
padding: 20px;
}
Код HTML-смтраницы:
<div class="blk1"> Содержание блока 1. Текст, текст, … </div>
<div class="blk1"> Содержание блока 2. Текст, текст, … </div>
- Процентный способ выравнивания. Его использовать можно тогда, когда ширина блока задана в процентах. Принцип в том, что если ширина блока 60%, то на отступы слева и справа остается 40% (по 20% с каждой стороны). В этом случае можно для этих блоков применять стиль:
margin:5px 20% 10px 20%;
width:60%;
Код страницы аналогичен предыдущему способу.
И в этом случае два и более блока будут располагаться так же вертикально, даже если их суммарная длинна много меньше ширины экрана браузера.
- Смешанный способ выравнивания блока по центру:
left: 50%;
margin-left: -500px;
position: absolute;
Это не самый лучший, т.к. имеет ряд недостатков:- выравнивание получается не совсем по центру;
- при использовании двух и более блоков на странице виден только последний, т.к. стиль position: absolute; (абсолютное позиционирование) ставит все блоки в одно место.
- С использованием родительского блока. Метод предполагает использование одного дополнительного общего блока, внутри которого помещаются выравниваемые блоки.
В этом случае HTML-код страницы:
<div class="dop-block">
<div class="blk4"> Содержание блока 1. Текст, текст… </div>
<div class="blk4"> Содержание блока 2. Текст, текст… </div>
… ниже дополнительные блоки (при необходимости) …
<div class="blk4"> Содержание блока 3. Текст, текст… </div>
<div class="blk4"> Содержание блока 4. Текст, текст… </div>
<div class="blk4"> Содержание блока 5. Текст, текст… </div>
</div>
Стили для этих блоков:
.dop-block {
position: relative;
float: right;
right: 50%;
}
.blk4 {
position: relative;
float: left;
left: 50%;
/* эти стили на выравнивание не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;
}
Если блоков в странице не много, т.е. они помещаются в одну строку, то выравнивание для них работает:
Главный недостаток - когда блоков много и они не помещаются в 1 ряд, то выравнивание блоков по центру перестает работать:
- С использованием стиля text-align: center; в родительском блоке и стиля display: inline-block; в дочерних. Тогда HTML-код страницы:
<div class="dop-block">
<div class="blk5"> Содержание блока 1. Текст, текст… </div>
<div class="blk5"> Содержание блока 2. Текст, текст… </div>
… ниже дополнительные блоки (при необходимости) …
<div class="blk5"> Содержание блока 3. Текст, текст… </div>
<div class="blk5"> Содержание блока 4. Текст, текст… </div>
<div class="blk5"> Содержание блока 5. Текст, текст… </div>
</div>
Стили для этих блоков:
.dop-block {
text-align: center;
}
.blk5 {
display: inline-block;
/* дополнительный стиль для вытавнивания текста внутри блока */
text-align:left;
/* эти стили на выравнивание блоков не влияют */
margin: 5px;
background-color:#CCC;
width:400px;
border: 1px solid #999;
padding: 20px;
}
Страница в этом варианте будет выравнивать блоки даже если их общая длинна превышает ширину окна браузера:
Не все способы описаны. Если вы считаете, что есть еще более удобный способ, напишите.