CSS-文字向左右對齊，並垂直置中

目標效果

方法一

• 將外層容器定義為flex容器，且其中的items向容器中間對齊
• 定義外層容器中的item與item之間保持相同的空間距離

實作方法一

<div class="header">
    <div  class="left">
         我是左邊文字
    </div>
    <div class="right">
        我是右邊文字內容
    </div>
</div>

.header{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

補充：當定義元素為彈性容器，而它的子元素們就會變成彈性項目。

• flex 值會讓彈性容器變成塊級元素（block-level element）
• inline-flex 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。

方法二

• 定義外層容器為彈性容器
• 定義內層item的寬度佔比為1:1填滿整個容器
• 內層item的文字各自靠左及靠右

  實作方法二

  .header{
      display: flex;
      align-items: center;
  }
  .left{
      flex: 1;
      text-align: left;
  }
  .right{
      flex: 1;
      text-align: right;
  }

成果

My Project-Profile-Projects page