SVG 网格和文本

Question

我正在自定义一个 Ghost 主题以创建一个 2 column/2 行网格，其中 svg 图像、url 和文本在下方居中。

可以在 https://country-musicfy.ghost.io/home

看到正在进行的工作

我不知道如何使 svg 图像具有相同的高度，也无法使下面的文本居中且为 20px

如果有人有建议，我愿意使用 svg 图像和文本创建按钮。

下面是html和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

您可以使用 CSS Flexbox 轻松实现。请查看下面的代码。然后，如果需要，您可以调整 svg 图像下方文本的高度或填充或图像本身的大小。

/* 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>

SVG 网格和文本

SVG Grid & Text

html

css

svg

ghost-blog