Почему align-content: center; не работает?

Почему align-content: center; не работает?

25.06.2020 01:00:21 Источник

Я создаю страницу оформления заказа, и она выглядит так:

enter image description here

В разделе "детали заказа" я хотел бы, чтобы информация о продукте находилась в середине контейнера.

HTML код выглядит следующим образом:

<div class="orderDetails">
    <h4><strong>Order Details</strong></h4>
    <hr>

    <div class="itemsInOrderContainer">
        <div class="productImgContainer">
            <img src="{{ asset('img/iamlush/shop/shopDark.jpg') }}" class="checkoutImg">
        </div>

        <div class="orderDetailsContainer">
            <div class="orderInfo">
                <img src="{{ asset('img/logo/IAmLush_logoNew.png') }}" class="productInfoTitle">
                <p>Mediterranean Dark</p>
                <p>£24.99</p>
            </div>
        </div>
</div>

CSS выглядит следующим образом:


.orderDetailsContainer {
    width: 66%;
    height: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

Любая помощь будет оценена по достоинству! Спасибо

У вопроса есть решение - Посмотреть?

Ответы - Почему align-content: center; не работает? / Why will align-content: center; not work?

Ayomi Gunasekara

25.06.2020 01:36:23

.orderInfo{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 5.5em;
   background-color: #8880;
}

Также вы можете проверить эту ссылку: W3Schools-CSS align

Является ответом!
Abdullah Al Noor

25.06.2020 01:42:08

удалить

 align-content: center;

заменить на

align-items: center;
justify-content: center;
r0ulito

25.06.2020 02:14:41

Иногда я использую это

margin : 0 auto;

Чтобы сделать трюк

Как вы используете flex я думаю

justify-content: center;

Будет делать трюк

Закрыть X