我有一些食谱卡片,我想在它继续显示在下一行之前只在一行中显示 3 个,这样容器就会以页面为中心。这是我所拥有的:
这是我的代码:
<div class="recipe-container">
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/easy-millionaires-shortbread" target="_blank"><img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/millionaires-shortbread-52587dd.jpg?quality=90&webp=true&resize=300,272"></a>
<p class="recipe-title">Millionare's Shortbread</p>
</div>
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf" target="_blank"><img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-559666_11-b53071d.jpg?quality=90&webp=true&resize=300,272"></a>
<p class="recipe-title">Classic White Loaf</p>
</div>
<div class="recipe-window">
<a href="https://www.bbcgoodfood.com/recipes/classic-white-loaf" target="_blank"><img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/recipe-image-legacy-id-1043451_11-4713959.jpg?quality=90&webp=true&resize=300,272"></a>
<p class="recipe-title">Ultimate Chocolate Cake</p>
</div>
</div>
.recipe-container {
margin: 0px;
padding: 10px;
display: inline-flex;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
我怎样才能做到这一点?
最佳答案
更改 display: flex;
并为 .recipe-container
类添加 justify-content: center;
.recipe-container {
...
display: flex;
justify-content: center;
flex-wrap: wrap;
}
关于html - 如何将 3 个 div 居中并使其换行到下一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74328469/