SVG Grid & Text-CodePudding

I am customizing a Ghost theme to create a 2 column/2 row grid with svg images, urls, and text centered below.

A work in progress can be seen at https://country-musicfy.ghost.io/home

I cannot figure out how to make the svg images the same height, nor make the text below centered and 20px

I am open to creating buttons with the svg images and text if anyone has suggestions.

Below is html and css:

<div > 
<div >
<a href="https://country-musicfy.ghost.io/lofi"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/music-alt.svg" width="100%" loading="lazy" 
  alt=""><p>LoFi 128</p></a>
</div>
<div >
<a href="https://country-musicfy.ghost.io/prime"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/music.svg" width="100%" loading="lazy" 
 alt=""></a>
</div>
<div >
<a href="https://country-musicfy.ghost.io/hifi"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/speaker.svg" width="100%" loading="lazy" 
 alt=""></a>
</div>
<div >
<a href="https://country-musicfy.ghost.io/master"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/headphones-alt.svg" width="100%" loading="lazy" 
 alt=""></a>
</div>
</div>


<style>
/* Two image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
padding: 5px;
background: #282A2D;
}
.svg-icon {filter: invert(65%) sepia(14%) saturate(3161%) hue-rotate(185deg) 
brightness(103%) contrast(105%);}

.svg-text {
text-align: justify;
width: 100%;
}

/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
</style>

CodePudding user response：

You can use CSS Flexbox to reach that easily. Please take a look to the code below. Then if you want, you can play with the height or padding of the text below the svg image or size of the image itself.

/* Two image containers (use 25% for four, and 50% for two, etc) */

    .kg-canvas {
        justify-items: center;
    }

    .row {
        width: 100%;
        display: flex;
        text-align: center;
        flex-wrap: wrap;
    }

    .column {
        background: #282A2D;
        margin: 0;
        flex-basis: 50%;
    }

    .column a {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    
    .svg-icon {filter: invert(65%) sepia(14%) saturate(3161%) hue-rotate(185deg) 
        brightness(103%) contrast(105%);
        height: 100px;
    }

    .svg-text {
        text-align: justify;
        width: 100%;
    }

    /* Clear floats after image containers */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

<div > 
        <div >
            <a href="https://country-musicfy.ghost.io/lofi"><img src="https://country-musicfy.ghost.io/content/images/2022/03/music-alt.svg" width="100%" loading="lazy"   alt=""><p>LoFi 128</p></a>
        </div>
        <div >
            <a href="https://country-musicfy.ghost.io/prime"><img src="https://country-musicfy.ghost.io/content/images/2022/03/music.svg" width="100%" loading="lazy"  alt=""><p>LoFi 128</p></a>
        </div>
        <div >
            <a href="https://country-musicfy.ghost.io/hifi"><img src="https://country-musicfy.ghost.io/content/images/2022/03/speaker.svg" width="100%" loading="lazy"  alt=""><p>LoFi 128</p></a>
        </div>
        <div >
            <a href="https://country-musicfy.ghost.io/master"><img src="https://country-musicfy.ghost.io/content/images/2022/03/headphones-alt.svg" width="100%" loading="lazy"  alt=""><p>LoFi 128</p></a>
        </div>
    </div>