水平對齊文本行？

Question

我想使每行div中的鏈接合理，並使其位於頁面的中心，因此它看起來更干凈（假定下面位於頁面的中心）：

Chrysanthemum.jpg     Desert.jpg     Hydrangeas.jpg
Jellyfish.jpg         Koala.jpg      Lighthouse.jpg
Penguins.jpg          test (1).jpg     test (2).jpg
test (3).jpg          test (4).jpg       Tulips.jpg

它不必看起來完全一樣，因為圖像名稱的長度是可變的，我只是想使其比現在更好：

的HTML：

<div id='image-list'>
        <div class="row">
            <a class="image-link" href="/static/images/Chrysanthemum.jpg"> Chrysanthemum.jpg </a>
            <a class="image-link" href="/static/images/Desert.jpg"> Desert.jpg </a>
            <a class="image-link" href="/static/images/Hydrangeas.jpg"> Hydrangeas.jpg </a>
        </div>
        <div class="row">
            <a class="image-link" href="/static/images/Jellyfish.jpg"> Jellyfish.jpg </a>
            <a class="image-link" href="/static/images/Koala.jpg"> Koala.jpg </a>
            <a class="image-link" href="/static/images/Lighthouse.jpg"> Lighthouse.jpg </a>
        </div>
        <div class="row">
            <a class="image-link" href="/static/images/Penguins.jpg"> Penguins.jpg </a>
            <a class="image-link" href="/static/images/test%20%281%29.jpg"> test (1).jpg </a>
            <a class="image-link" href="/static/images/test%20%282%29.jpg"> test (2).jpg </a>
        </div>
        <div class="row">
            <a class="image-link" href="/static/images/test%20%283%29.jpg"> test (3).jpg </a>
            <a class="image-link" href="/static/images/test%20%284%29.jpg"> test (4).jpg </a> 
            <a class="image-link" href="/static/images/Tulips.jpg"> Tulips.jpg </a>                
        </div>            
    </div>

CSS：

#image-list{
    display:  flex;
    justify-content: space-around;
}

當前輸出，工作正常，但是將所有行都放在同一行上：

我也嘗試過此CSS：

#image-list.row{
    display:  flex;
    justify-content: space-around;
}

但這只是將所有內容推向左側，似乎沒有任何理由： 此處為屏幕截圖

我忽略了什么或做錯了什么？ 我是否必須將div設置為特定寬度，然后以某種方式證明該寬度合理？

Answer 1

看起來您正在顯示表格數據，那么為什么不使用<table>呢？

如果需要某種響應式布局，則可以使用display: table和display: table-cell用於桌面，然后還原為display: block在較小的斷點處進行媒體查詢。

否則，為每個鏈接定義一個設置的寬度將使它們很好地.image-link { width: 33.33%; }例如.image-link { width: 33.33%; } .image-link { width: 33.33%; }

另外，要使Flex項目可以換行而不是顯示在一行上，您需要使用#image-list.row { flex-wrap: wrap; } #image-list.row { flex-wrap: wrap; }