CSS響應圈

Question

如何將一個圖標和文本（圖標下方）對齊，使它們在調整大小時保持在矩形div內的相同位置？這是我的意思的例子。 Example

Answer 1

.card{ 
 
    width: 300px; 
 
    height: 400px; 
 
    border: 1px solid skyblue; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.circle{ 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background: green; 
 
}

<div class="card"> 
 
    <span class="circle"></span> 
 
</div>

嘗試使用display: flex