Hello!

How to make in the "HTML" blocks in a row from left to right, but in the center! I need to place 3 blocks horizontally in one line. When you change the screen resolution, for example on mobile devices, the blocks can be placed vertically, but in the center.

.outline-3 { width: 32%; /* Ширина слоя */ max-width: 32%; /* Максимальная Ширина слоя */ min-width: 370px;/* Минимальная ширина слоя */ /* float: left; Выравнивание блока слева */ background: #E6EEDE; /* Цвет фона */ box-shadow: 7px 7px 10px rgba(0,0,0,0.6), /* Наружняя тень */ 0 5px 10px rgba(0, 0, 0, 0.6) inset, /* Наружняя вертикальная тень */ 0 0 40px rgba(0, 0, 0, 0.5) inset; /* Внутренняя тень */ border: 1px solid #000000; /* Рамка */ border-radius: 0px 0px 10px 10px; padding: 0px 5px 0px 5px; /* Отступы */ } .text-2 { font: 18pt tahoma; color: #1E293B; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); /* Тень текста*/ } 
 <div class="outline-3" align="center"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" align="center"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" align="center"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div>

    3 answers 3

    For example, using the display: inline-block; property display: inline-block; :

     .outline-3 { width: 32%; /* Ширина слоя */ max-width: 32%; /* Максимальная Ширина слоя */ min-width: 370px;/* Минимальная ширина слоя */ /* float: left; Выравнивание блока слева */ background: #E6EEDE; /* Цвет фона */ box-shadow: 7px 7px 10px rgba(0,0,0,0.6), /* Наружняя тень */ 0 5px 10px rgba(0, 0, 0, 0.6) inset, /* Наружняя вертикальная тень */ 0 0 40px rgba(0, 0, 0, 0.5) inset; /* Внутренняя тень */ border: 1px solid #000000; /* Рамка */ border-radius: 0px 0px 10px 10px; padding: 0px 5px 0px 5px; /* Отступы */ text-align: center; /* Выравнивание содержимого по-центру */ display: inline-block; vertical-align: middle; } .text-2 { font: 18pt tahoma; color: #1E293B; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); /* Тень текста*/ } .wrap { text-align: center; /* Задает контенту выравнивание по-центру */ } 
     <div class="wrap"> <div class="outline-3"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" > <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" > <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> </div>

    Or so, using the flex property:

     .outline-3 { width: 32%; /* Ширина слоя */ max-width: 32%; /* Максимальная Ширина слоя */ min-width: 370px;/* Минимальная ширина слоя */ /* float: left; Выравнивание блока слева */ background: #E6EEDE; /* Цвет фона */ box-shadow: 7px 7px 10px rgba(0,0,0,0.6), /* Наружняя тень */ 0 5px 10px rgba(0, 0, 0, 0.6) inset, /* Наружняя вертикальная тень */ 0 0 40px rgba(0, 0, 0, 0.5) inset; /* Внутренняя тень */ border: 1px solid #000000; /* Рамка */ border-radius: 0px 0px 10px 10px; padding: 0px 5px 0px 5px; /* Отступы */ text-align: center; /* Выравнивание содержимого по-центру */ } .text-2 { font: 18pt tahoma; color: #1E293B; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); /* Тень текста*/ } .wrap { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: center; } 
     <div class="wrap"> <div class="outline-3"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" > <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" > <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> </div>

    • Thank! And how to do that if on a small resolution 1 block is shifted down, then all blocks should be placed vertically? I just need the blocks to be placed in a row either horizontally or vertically, but for example, not 2 blocks horizontally, but 3 slid down ... - Marat Nauruzbayev
    • @ MaratNauruzbaev, with display: inline-block; - with a lower resolution, they will be exactly tuned under each other and in the center, and in the case of flex, the code for .wrap better to arrange like this: flex-flow: row wrap; - This will allow the blocks to rebuild if they do not intermeddle - HamSter
    • Do not rebuild quirktools.com/screenfly/#u=http%3A//free-pc.ru/podpiska/… - Marat Nauruzbayev
    • quirktools.com/screenfly/#u=http%3A//free-pc.ru/podpiska/… - Marat Nauruzbayev

     .content { /* родительский div */ text-align: center; /* выравнивание блочных елементов по центру */ } .outline-3 { width: 100px; /* Ширину изменил на фиксированую для наглядности */ background: #E6EEDE; /* Цвет фона */ box-shadow: 7px 7px 10px rgba(0,0,0,0.6), /* Наружняя тень */ 0 5px 10px rgba(0, 0, 0, 0.6) inset, /* Наружняя вертикальная тень */ 0 0 40px rgba(0, 0, 0, 0.5) inset; /* Внутренняя тень */ border: 1px solid #000000; /* Рамка */ border-radius: 0px 0px 10px 10px; padding: 0px 5px 0px 5px; /* Отступы */ text-align: center; /* выравнивание по центру */ display: inline-block; /* делаем div-ы блоками */ } .text-2 { font: 18pt tahoma; color: #1E293B; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); /* Тень текста*/ } 
     <div class="content" > <div class="outline-3" > <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" align="center"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3" align="center"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> </div>

      Everything is very simple. Here is the finished code. Blocks are in line in the middle. When you change the width of the screen, the blocks go to the bottom, but they remain in the center.

       .content { text-align: center; display:inline-block; } .outline-3 { display:inline-block; width: 32%; max-width: 32%; min-width: 370px; background: #E6EEDE; box-shadow: 7px 7px 10px rgba(0,0,0,0.6), 0 5px 10px rgba(0, 0, 0, 0.6) inset, 0 0 40px rgba(0, 0, 0, 0.5) inset; border: 1px solid #000000; border-radius: 0px 0px 10px 10px; padding: 0px 5px 0px 5px; } .text-2 { font: 18pt tahoma; color: #1E293B; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); } 
       <div class="content" > <div class="outline-3" > <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> <div class="outline-3"> <p class="text-2">Если ты хочешь получать свежие подробные статьи этого блога с картинками и видео в свой почтовый ящик, то введи свой E-mail в форму ниже, и как только я напишу статью на блоге, ты первым об этом узнаешь! </p> </div> </div>