CSS 个响应式方块，文本在每个方块下方居中排列

Question

我有一些响应式渐变方块，每个方块下方都有居中文本，但是当我使用display: flex将它们排成一行时，它们消失了，我只能看到并排的文本。 我在此代码片段中只添加了 2 个响应式方块，最初应该是 4 个响应式方块，但我猜它的代码太多了。 无论如何，我们将不胜感激，谢谢。这是我没有display: flex --

HTML

<section class="icons">
            <div class="iconWrapper">
                <a href="/Send/send.html">
                    <div id="send"></div>
                </a> 
                <span>Send</span>
                <a href="/Recieve/receive.html">
                    <div id="receive"></div>
                </a>
                <span>Receive</span>
            </div>
        </section>

CSS

.icons {
    background-color: blue;
    width: 100%;
    height: 20%;
    justify-content: space-between;

}


.iconWrapper {
    padding-top: 25px;
    padding-left: 10px;
    background: rgb(0, 0, 0);
    box-sizing: border-box;
    resize: horizontal;
    border: 1px dashed;
    overflow: visible;
    max-width: 20%;
    height: calc(22vh - 16px);
    text-align: center;
    font-size: 5vw;
    color: whitesmoke;
    font-family: Roboto;
}

#send {
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 15%;
    border-radius: 13px;
    background-image: linear-gradient(to bottom right, rgb(93, 35, 255) 25%, rgb(45, 255, 220));
}


#receive {
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 15%;
    border-radius: 13px;
    background-image: linear-gradient(to bottom right, rgb(93, 35, 255) 25%, rgb(45, 255, 220));
}

Answer 1

如果我理解正确，这就是你要找的。 我为 4 个对象做了它，你可以通过更改calc(25%...来更改它，如果你想要连续 3 个对象，可以说是 33%，但不要忘记相应地更改padding-bottom 。

 .icons { width: 100%; }.iconWrapper { width: 100%; display: flex; gap: 15px; }.send-receive { display: block; flex: 1 0 calc(25% - 15px); position: relative; padding-bottom: 25%; margin-bottom: 15%; border-radius: 13px; background-image: linear-gradient( to bottom right, rgb(93, 35, 255) 25%, rgb(45, 255, 220) ); }.send-receive span { display: block; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); }

 <section class="icons"> <div class="iconWrapper"> <a class="send-receive" href="/Send/send.html"> <div id="send"></div> <span>Send</span> </a> <a class="send-receive" href="/Recieve/receive.html"> <div id="receive"></div> <span>Receive</span> </a> <a class="send-receive" href="/Send/send.html"> <div id="send"></div> <span>Send</span> </a> <a class="send-receive" href="/Recieve/receive.html"> <div id="receive"></div> <span>Receive</span> </a> </div> </section>