html - 如何将 3 个 div 居中并使其换行到下一行？

Question

我有一些食谱卡片，我想在它继续显示在下一行之前只在一行中显示 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;
}

我怎样才能做到这一点？

Answer 1

更改 display: flex; 并为 .recipe-container 类添加 justify-content: center;

.recipe-container {
   ...
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }