@SaberChazer

3 карточки не хотят становится по центру?

<div class="shop_tiles">
            <div class="item"> 
                <img src="https://www.yampil.info/wp-content/uploads/2022/01/parimatch-5.png" class="item_img" id="two_b">
                <div class="item_info">
                    <p translate="no"><strong>Parimatch</strong></p><div style="width: 60px; border: 2px solid black; background: black; margin: 0 auto; border-radius: 6px;"></div>
                    <b><p style="color: red; text-decoration: underline;">Лидер </p></b>
                </div>
                <br>
                <a href="https://parimatch.com/" target="_blank
">
                    <div class="button">
                       Перейти на букмекера
                    </div>
                </a>
            </div> 

            <div class="item"> 
                <img src="https://ruelect.com/wp-content/uploads/2021/01/%D0%9C%D0%B5%D0%BB%D0%B1%D0%B5%D1%82.png" class="item_img">
                <div class="item_info">
                    <p translate="no"><strong>Melbet</strong></p><div style="width: 50px; border: 2px solid black; background: black; margin: 0 auto; border-radius: 6px;"></div>
                    <b><p style="color: red; text-decoration: underline;">Лидер </p></b>
                </div>
                <br>
                <a href="https://melbetua.com/ru" target="_blank">
                    <div class="button">
                       Перейти на букмекера
                    </div>
                </a>
            </div> 

            <div class="item"> 
                <img src="https://aqmolanews.kz/ru/wp-content/uploads/2021/04/image_1028_b1-1.jpg" class="item_img">
                <div class="item_info">
                    <p translate="no"><strong>1xBet</strong></p><div style="width: 45px; border: 2px solid black; background: black; margin: 0 auto; border-radius: 6px;"></div>
                    <b><b><p style="color: red; text-decoration: underline;">Лидер </p></b></b>
                </div>
                <br>
                <a href="https://1xbet.com" target="_blank">
                    <div class="button">
                       Перейти на букмекера
                    </div>
                </a>
            </div>              
        </div>

.shop_tiles {
    grid-column: 2 / -2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 100px;
    margin-bottom: 100px;
}

.shop_tiles .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
}

.shop_tiles .item p {
    text-align: center;
    margin: 20px;
}

.shop_tiles .item_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop_tiles .button {
    background: black;
    border-radius: 10px;
    text-align: center;
    padding: 10px 50px;
    font-size: 18px;
}

.shop_tiles .button:hover {
    background: rgb(61, 60, 60);
    transition: 1s;
}
.tiles .item {
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: 1;
    overflow: hidden;
}

.tiles .item_img {
    width: 100%;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.tiles .item_overlay {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
}

.tiles .item:hover .item_img {
    transform: scale(1.2);
    transition: 0.5s;
}

/*shop.html*/
.shop_tiles {
    grid-column: 2 / -2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 100px;
    margin-bottom: 100px;
}

.shop_tiles .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
}

.shop_tiles .item p {
    text-align: center;
    margin: 20px;
}

.shop_tiles .item_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-grid {
    display: grid;
    grid-template-columns: 1fr repeat(2, minmax(auto, 600px)) 1fr;
}

В css немного лишнего кода просто я очень спешу, а все проверять займет время.
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 2
@wex33
.shop_tiles{
justify-content: center;
}
Ответ написан
Комментировать
@nickejes
Для блока с классом .shop_tiles, можно указать свойство justify-content: center;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 10:57
50000 руб./за проект
28 нояб. 2024, в 10:52
10000 руб./за проект