使用flexbox並排居中兩個元素

Question

如何使用CSS flex在頁面上將一個錨點和一個段落彼此相鄰放置在一起？

我試圖避免在錨點和段落上使用float，儘管我沒有完全掌握flex。

錨點/圖像應該出現在段落的左側，儘管它們應該保持居中。

我得迄今：

section 
 
{ 
 
align-items: center; 
 
display: flex; 
 
flex-direction: column; 
 
}

<section> 
 
<a href="#"> 
 
    <img alt="Example" src="https://jsfiddle.net/img/logo.png" /> 
 
</a> 
 
<p>Description goes here...</p> 
 
</section>

https://jsfiddle.net/eondkrpd/

Answer 1

section { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<section> 
 
    <a href="#"> 
 
    <img alt="Example" src="https://jsfiddle.net/img/logo.png" /> 
 
    </a> 
 
    <p>Description goes here...</p> 
 
</section>

• display: flex創建柔性容器
• flex-direction: row，默認設置（即，它可以被省略），使主軸的水平，在該方向上排列的兒童（撓曲件）
• justify-content: center將沿着居中柔性物品主軸

更多細節在這裏：Methods for Aligning Flex Items