# 容器對齊方式

* 全部垂直對齊 : 將裡面的所有標籤或內容進行 上下位置 調整

![](https://2671156273-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaDZjNzr08eW9hIl-Qq%2F-LaDdqw_bCggxv6Z-pv8%2F-LaDdwN1h5iUE2bxaB4j%2FallVerticalAlign.png?generation=1552876561898358\&alt=media)

* 個別垂直對齊 : 將自身標籤進行 上下位置 調整

![](https://2671156273-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaDZjNzr08eW9hIl-Qq%2F-LaDdqw_bCggxv6Z-pv8%2F-LaDdwN3QZEgQI8m1bPT%2FsingleVerticalAlign.png?generation=1552876561406927\&alt=media)

* 水平對齊 : 將裡面的所有標籤或內容進行 左右位置 調整

![](https://2671156273-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaDZjNzr08eW9hIl-Qq%2F-LaDdqw_bCggxv6Z-pv8%2F-LaDdwN5zrrX5JDRFJdo%2FLevelAlign.png?generation=1552876561149814\&alt=media)

| 對齊方式          | 位置      | 用法                      |
| ------------- | ------- | ----------------------- |
| 全部垂直靠上對齊      | outside | align-items-start       |
| 全部垂直置中對齊      | outside | align-items-center      |
| 全部垂直靠下對齊      | outside | align-items-end         |
| 個別垂直靠上對齊      | inside  | align-self-start        |
| 個別垂直置中對齊      | inside  | align-self-center       |
| 個別垂直靠下對齊      | inside  | align-self-end          |
| 水平靠左對齊        | outside | justify-content-start   |
| 水平置中對齊        | outside | justify-content-center  |
| 水平靠右對齊        | outside | justify-content-end     |
| 水平分散對齊(有左右間隔) | outside | justify-content-around  |
| 水平分散對齊(無左右間隔) | outside | justify-content-between |

* 範例 : 

  ```markup
  <div class="container">
    <div class="row (outside)">
        <div class="col (inside)">col 等寬 1/3</div>
        <div class="col (inside)">col 等寬 2/3</div>
        <div class="col (inside)">col 等寬 3/3</div>
    </div>
  </div>
  ```