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

を使用してみてください