SVG 网格和文本

Question

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 class="row"> 
<div class="column">
<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" 
class="svg-icon" class="svg-text" alt=""><p>LoFi 128</p></a>
</div>
<div class="column">
<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" 
class="svg-icon" alt=""></a>
</div>
<div class="column">
<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" 
class="svg-icon" alt=""></a>
</div>
<div class="column">
<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" 
class="svg-icon" 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>

Answer 1

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 class="row"> <div class="column"> <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" class="svg-icon" class="svg-text" alt=""><p>LoFi 128</p></a> </div> <div class="column"> <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" class="svg-icon" alt=""><p>LoFi 128</p></a> </div> <div class="column"> <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" class="svg-icon" alt=""><p>LoFi 128</p></a> </div> <div class="column"> <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" class="svg-icon" alt=""><p>LoFi 128</p></a> </div> </div>