Horizontally justify rows of text?

Question

I would like to have the links in each row div to be justified, and to be centered on the page, so it looks cleaner (assume below is centered on the page):

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

It doesn't have to look exactly like that, as the image names are of variable length, I'd just like to make it look better than it does now:

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;
}

current output, kind of works but puts all my rows on the same "line":

I've also tried this css:

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

But that just pushes everything to the left, with no seeming justification: screenshot here

What am I overlooking or doing wrong? Do I have to maybe set a div to be a specific width, then justify to that width somehow?

Answer 1

It looks like you are displaying tabular data, so why not use a <table> ?

If you want some sort of responsive layout, then you can use display: table and display: table-cell for desktop, then revert to display: block at smaller breakpoints with media queries.

Otherwise, defining a set width for each link will line them up nicely eg .image-link { width: 33.33%; } .image-link { width: 33.33%; }

Also, to enable flex items to wrap rather than display on one line, you need to use #image-list.row { flex-wrap: wrap; } #image-list.row { flex-wrap: wrap; }