如何在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？

回答

相关问题