我連續三個圖示，每個圖示下面都有一個標題和一個副標題。我嘗試做的是將標題對齊在同一行上，無論字幕有多大。我需要它在移動和桌面上作業。
這是我到目前為止所做的代碼，但沒有成功對齊它們。如果你能幫我用 flex 解決這個問題那就太好了
#join3icons {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--size-125);
padding: 0 var(--size-125);
}
.icon-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
}<div id="join3icons">
<div class="icon-box">
<a href="."><img src="Easier.svg"></a>
<span class="headline3">Einfacher</span>
<span class="sub3iconsText">Auftragsverfolgung</span>
</div>
<div class="icon-box">
<a href="."><img src="Faster.svg"></a>
<span class="headline3">Schneller</span>
<span class="sub3iconsText ">Checkout-Vorgang</span>
</div>
<div class="icon-box">
<a href="."><img src="Earn.svg"></a>
<span class="headline3">Besser</span>
<span class="sub3iconsText ">Lorem Ipsum is simply dummy text</span>
</div>
</div>uj5u.com熱心網友回復：
您需要提供照片的確切尺寸，因為左邊的照片比其他照片大，這應該可以解決您的問題。
CSS：
img{
height: 100px;
}
uj5u.com熱心網友回復：
您可以通過使用 grid 而不是 flexbox 來實作
#join3icons {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
洗掉圖示框 css 類和相應的 div，一切都會按您的網格排序
根據您的需要，您可以自動替換 grid-template-rows 行中的 1fr，因此每行都有自己的高度。當然你也可以添加一個間隙
uj5u.com熱心網友回復：
因為標題底部的文本是單行的，其余的是兩行，flex 降低了標題以補償左側的距離，因此它不適合一行。可以用grid，這樣比較好處理，或者用一個size給底部的文字指定一個標題，例如：
.sub3iconsText {
height: 40px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534724.html