5 способов выравнивание блоков div по центру при помощи CSS

БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

5 способов выравнивание блоков div по центру при помощи CSS

Способов выравнивания блоков довольно много. Каждый выбирает для себя более привычный. Я опишу 5 способов, выбирайте наиболее подходящий. 

scrin5

 

  1.  Самый простой способ – с использованием стиля margin:10px auto 5px;
    Его можно применять для выравнивания одного блока. Два и более блока в этом случае будут располагаться вертикально.
    scrin1
    стиль:
    .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>

  1.  Процентный способ выравнивания. Его использовать можно тогда, когда ширина блока задана в процентах. Принцип в  том, что если ширина блока 60%, то на отступы слева и справа остается 40% (по 20% с каждой стороны). В этом случае можно для этих блоков применять стиль:

margin:5px 20% 10px 20%;

               width:60%;
Код страницы аналогичен предыдущему способу.
scrin2
И в этом случае два и более блока будут располагаться так же вертикально, даже если их суммарная длинна много меньше ширины экрана браузера.

  1. Смешанный способ выравнивания блока по центру: left: 50%;
    margin-left: -500px;
    position: absolute;
    Это не самый лучший, т.к. имеет ряд недостатков:  
    1. выравнивание получается не совсем по центру;
    2. при использовании двух и более блоков на странице виден только последний, т.к. стиль position: absolute;  (абсолютное позиционирование) ставит все блоки в одно место.

scrin3

  1. С использованием родительского блока. Метод предполагает использование одного дополнительного общего блока, внутри которого помещаются выравниваемые блоки.
    В этом случае 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;
}

Если блоков в странице не много, т.е. они помещаются в одну строку, то выравнивание для них работает:
scrin4

Главный недостаток - когда блоков много и они не помещаются в 1 ряд, то выравнивание блоков по центру перестает работать:
 scrin4 2

  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;

}

Страница в этом варианте будет выравнивать блоки даже если их общая длинна превышает ширину окна браузера:

scrin5

Не все способы описаны. Если вы считаете, что есть еще более удобный способ, напишите.

instagram Одноклассники Вконтакте Канал на YouTube whatsapp
© 2015-2019 Университетский центр компьютерного обучения "Турбо"
г. Майкоп, ул. Ветеранов, 228, тел.: 8 (8772) 57-11-00, 8(918)213-95-94