Помощь с CSS выравниванием

138
05 апреля 2021, 15:30

Встала проблема с выравниванием блоков как на картинке. Помогите пожалуйста с решением, какими способами это можно сделать? Сайт верстаю на Bootstrap4.

.BLOCK_4_ZAGOLOVOK { 
    font-family: 'Bebas Neue'; 
    font-weight: bold; 
    font-size: 42px; 
    color: #005aca; 
    margin: 80px 0 60px 0;} 
.BLOCK_4_subtitle_text{ 
    justify-content: center; 
    font-size: 20px; 
    font-family: 'Calibri'; 
    line-height: 21px;} 
.BLOCK_4_subtitle_text_blue{ 
    font-size: 20px; 
    font-family: 'Calibri'; 
    font-weight: bold; 
    color: #1d487d;} 
.card_priemushestva{ 
    padding: 20px !important; 
    display: grid;} 
.bottom_text{ 
    font-size: 25px; 
    font-family: 'Calibri'; 
    font-weight: lighter;} 
.bottom_text_bold{ 
    font-size: 25px; 
    font-family: 'Calibri'; 
    font-weight: bold; 
    color: #1d487d;}
<div class="container" style="max-width: 1366px;"> 
        <div class="row" style="display: grid; justify-content: center;"> 
            <h2 class="ZAGOLOVOK_BLUE">Преимущества Smart POS</h2> 
        </div> 
        <div class="grid-container grid-container-block-4"> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/best-choice.png"> 
                <span class="BLOCK_4_subtitle_text">Принимайте<span class="BLOCK_4_subtitle_text_blue"> 10-ю </span>способами</span> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/number-1.png"> 
                <span class="BLOCK_4_subtitle_text">Подключение за<br><span class="BLOCK_4_subtitle_text_blue"> 1 </span>день</span>  
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/withdraw.png"> 
                <span class="BLOCK_4_subtitle_text">Вывод средст<br> на<span class="BLOCK_4_subtitle_text_blue"> 3-й </span>день</span> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/percentage.png"> 
                <span class="BLOCK_4_subtitle_text">Комиссия <br> от<span class="BLOCK_4_subtitle_text_blue"> 0% </span></span><img src="star.png" alt=""> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/whatsapp.png"> 
                <span class="BLOCK_4_subtitle_text">Принимайте деньги через<br><span class="BLOCK_4_subtitle_text_blue"> WhatsApp</span></span> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/credit-card.png"> 
                <span class="BLOCK_4_subtitle_text">Принимайте оплату на<br><span class="BLOCK_4_subtitle_text_blue"> сайте </span>или<span class="BLOCK_4_subtitle_text_blue"> instagram</span></span> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/notification.png"> 
                <span class="BLOCK_4_subtitle_text">Получайте уведомления по<br><span class="BLOCK_4_subtitle_text_blue"> SMS, E-mail, API</span></span> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/web-site.png"> 
                <span class="BLOCK_4_subtitle_text">Продающаяя страница в<br><span class="BLOCK_4_subtitle_text_blue"> подарок</span></span> 
            </div> 
            <div class="card card-logo card_priemushestva"> 
                <img src="images/account.png" alt=""> 
                <span class="BLOCK_4_subtitle_text">Личный кабиент с <br><span class="BLOCK_4_subtitle_text_blue">удобными функциями</span></span> 
            </div> 
        </div> 
        <div style="text-align: center; margin-bottom: 60px">  
            <h3 class="bottom_text"><img src="images/star1.png" alt=""> Стандартная комиссия <span class="bottom_text_bold">2,7%</span>. Сколько заплатить за сервис решать вам</h3> 
        </div> 
    </div>

Answer 1

Вам необходимо поднастроить поведение для различных экранов.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
      rel="stylesheet"> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col"> 
      <i class="material-icons">3d_rotation</i> 
    </div> 
    <div class="col"> 
      <i class="material-icons">3d_rotation</i> 
    </div> 
    <div class="col"> 
      <i class="material-icons">3d_rotation</i> 
    </div> 
    <div class="col"> 
      <i class="material-icons">3d_rotation</i> 
    </div> 
    <div class="col"> 
      <i class="material-icons">3d_rotation</i> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="col"> 
      <i class="material-icons">euro_symbol</i> 
    </div> 
        <div class="col"> 
      <i class="material-icons">euro_symbol</i> 
    </div> 
        <div class="col"> 
      <i class="material-icons">euro_symbol</i> 
    </div> 
        <div class="col"> 
      <i class="material-icons">euro_symbol</i> 
    </div> 
  </div> 
</div>

READ ALSO
Как сделать чтобы функция не срабатывала во второй раз, если я делаю то же самое

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

Как сделать чтобы при нажатии на одну и ту же form дважды или больше, функция не работала? Но при нажатии на другие form (Не та что ранее) функция...

116
разделить строку на части

разделить строку на части

есть строка например:

254
Переход на выделенную строку в datagridview

Переход на выделенную строку в datagridview

На форме есть Datagridview (с bindingsource) с вертикальной прокруткой (более 200 строк), в котором выделена строка и выполнена прокрутка, те

127
C# как читать текст из .docx через поток

C# как читать текст из .docx через поток

Проблема возникает именно сdocx файлами, файлы

117