如何在CSS中插入每行一行內嵌塊div？

我工作的這個頁面http://www.donchisciotte-lucca.it/it/offerte 如何在CSS中插入每行一行內嵌塊div？

上，你可以看到我想有4張圖片，以3周比的div他們每個人（標題，描述和按鈕）。爲了將它們垂直居中放置在單個圖片上，我已將3個div放在了內嵌塊中，但它們全部顯示在同一行中。他們應該是每行一個，但我嘗試過的一切都不起作用。

我該如何解決這個問題？

非常感謝

來源

2016-06-14 manu.valentin

添加''
之間 – LGSon

我想用CSS來解決它，所以我不能用html代碼 –

你應該將整個東西包裝在一個內嵌塊div中，而不是三個元素中的每一個。居中包裝div。然後只需照常輸入，每個東西都可以在自己的行上（或使用display：block）。 –

無論哪種方式，我想你會在一個變通尋找，但我認爲它可能會更有意義使用display:block，並找到一種方式來獲得正確的垂直間距，而不是使用display:inline-block並且必須強制他們在不同的線路上。那麼如何讓.offerte .g-array-item div商品display:block然後給他們一個百分比頂部，例如：margin-top:30%。

試試看，看看它是怎麼樣？

來源

2016-06-14 17:34:49 blubberbo

謝謝你，我用display：block代替所有的div，並使用了padding-top作爲標題（帶有問題的邊距），所以標題也推動了描述和按鈕。然後，我確保使描述空間足夠大，以便線條數量不會影響它 –

你應該將整個東西包裝在一個display:inline-block div中，而不是三個元素中的每一個。用你使用的任何東西來居中封裝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>

來源

2016-06-14 17:43:23

不幸的是，使用display：block垂直對齊效果不理想，但使用它後，再加上一些手動調整大小和填充而不是自動對齊，正如另一個答案所示，我設法做到了。 –

如何在CSS中插入每行一行內嵌塊div？

回答

相關問題