Как разместить встроенные блоки div по одной в строке с помощью CSS?

Question

Я работаю на этой странице http://www.donchisciotte-lucca.it/it/offerte

и как вы можете видеть, что я хочу иметь 4 фотографии, с 3-дивы над каждым из них (название, описание и кнопки). Я поместил 3 div в встроенный блок, чтобы центрировать их по вертикали над одним изображением, но они отображают все в одной строке. Они должны быть по одному в каждой строке, но все, что я пробовал, не работает.

Как я могу это решить?

Большое спасибо

Answer 1

В любом случае, я думаю, что вы будете смотреть на работу вокруг, но я думаю, что это могло бы иметь больше смысла использовать display:block и найти способ, чтобы получить правильный вертикальный интервал, а не используя display:inline-block и вынуждая их на разных линиях. Итак, как насчет создания .offerte .g-array-item div элементов display:block и затем предоставления им% margin-top, например: margin-top:30%.

Попробуй это и посмотри, как это выглядит?

Answer 2

Вы должны обернуть всю вещь в div display:inline-block, а не каждый из трех элементов со своим. Центрируйте обертку div с тем, что вы использовали. Затем просто введите как обычно, и каждая вещь может быть в отдельной строке (или использовать display:block).

Вот простой пример демонстрируют, что

body { 
 
    text-align: center; 
 
} 
 
div { 
 
    display: inline-block; 
 
    background: lightgray; 
 
} 
 
span { 
 
    display: block; 
 
}

<div> 
 
    <span>Img</span> 
 
    <span>Text</span> 
 
    <span>Button</span> 
 
</div>