1

Прошу вашей помощи, как мне центрировать контент 'Vintage Oliva' (белый блок)? Использую css grid для создания верстки, при увеличении размера монитора заметно, что весь контент в этом блоке прижимается к верху. Заранее спасибо

введите сюда описание изображения

 <!-- Vintage grid -->

    <div class="block-grid">
        <div class="image-bicycle-vintage">
           <div class="bicycle-company-logo"></div>
            <img src="images/Layer-101.png">
        </div>
        <div class="block-vintage-oliva">
            <div class="content-vintage-oliva">
                <div class="image-vintage-oliva"></div>
                <h1>Vintage Oliva</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
                <div class="border"></div>
            </div>
        </div>
            <div class="image-bicycle-third">
                <img src="images/Layer-11.png">
            </div>
    </div>



 /*-------------grid vintage--------------*/

.block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax (400px, auto) minmax (200px, auto);
}

.block-grid > .image-bicycle-vintage > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-bicycle-vintage > .bicycle-company-logo {
    background: url(images/Logo-bicycle-company.png) no-repeat 50% 50%;
    background-size: cover;
    width: 113px;
    height: 118px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.image-bicycle-vintage {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background: #282f35;
    position: relative;
    height: 100%;
}

.block-vintage-oliva {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    object-fit: cover;
}

.content-vintage-oliva {
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
    width: 82%;
}

.image-vintage-oliva {
    background: url(images/Icon1.png) no-repeat 50% 50%;
    background-size: contain;
    width: 41px;
    height: 30px;
    margin: 0 auto;
}

.block-vintage-oliva h1 {
    font-size: 16px;
    text-transform: uppercase;
    color: #353738;
    padding: 30px 0 25px;
}

.block-vintage-oliva p {
    color: #848789;
    font-size: 16px;
    font-family: 'Lato Regular';
    line-height: 31px;
    text-align: justify;
}

.border {
    border-bottom: 1px solid #848789;
    width: 50px;
    margin: 44px auto 54px auto;
    color: #848789;
}

.image-bicycle-third {
    background: #353738;
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    height: 100%;
}

.image-bicycle-third > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
1

1 ответ 1

0

Можно с помощью flexbox.

.content-vintage-oliva {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.