點燈坊

失くすものさえない今が強くなるチャンスよ

為什麼只有 Block 能使用 Margin Auto 水平置中 ?

Sam Xiao's Avatar 2020-12-26

margin: auto 為最簡單的水平置中，但卻只能用於有指定寬度的 Block，為什麼不能使用在 Inline 與 Inline-block 呢 ?

Version

CSS 3

block

auto000

<div> 佔據一整行，且 CSS 靠左對齊。

<template>
  <div class="item">CSS</div>
</template>

<style>
.item {
  margin: auto;
}
</style>

當 <div> 未指定寬度時，block 會佔據一整列，且內容靠左對齊。

也由於佔據一整列沒有 margin，因此 margin: auto 沒有任何意義。

auto001

當 <div> 有指定寬度時，margin: auto 就起了作用，自動分配左右 margin 而使 block 水平置中。

<template>
  <div class="item">CSS</div>
</template>

<style>
.item {
  width: 40px;
  margin: auto;
}
</style>

第 6 行

.item {
  width: 40px;
  margin: auto;
}
  • width: 40px：使用 width 特別指定 block 寬度
  • margin: auto：由於 <div> 有了明確寬度，因此不再佔據一整列，因此有了 margin，由於設定成 auto，browser 會自動將剩餘寬度分配給左右 margin，因此 <div> 能水平置中

若要使 CSS 也能水平置中，讓視覺上更協調，可以加上 text-align: center

inline

auto002

若改成 inline，儘管設定了 width，margin: auto 也沒有效果。

<template>
  <div class="item">CSS</div>
</template>

<style>
.item {
  display: inline;
  width: 40px;
  margin: auto;
}
</style>

第 6 行

.item {
  display: inline;
  width: 40px;
  margin: auto;
}

  • display: inline： 將 <div> 轉成 inline

  • width: 40px：使用 width 設定寬度，但 inline 不能設定 width，而是由 content 自動決定寬度，因此為無效設定

  • margin: auto：inline 無法設定 width，因此 browser 無法根據 width 計算出 margin-left 與 margin-right，其 margin-left 與 margin-right 永遠為 0，連 margin: auto 也無法改變，所以無法水平置中

inline-block

auto003

若改成 inline-block，儘管設定了 width，margin: auto 也沒有效果。

但可發現 width 對於 inline-block 有影響，與 inline 不同

<template>
  <div class="item">CSS</div>
</template>

<style>
.item {
  display: inline-block;
  width: 40px;
  margin: auto;
}
</style>

第 6 行

.item {
  display: inline-block;
  width: 40px;
  margin: auto;
}

  • display: inline-block： 將 <div> 轉成 inline-block

  • width: 40px：使用 width 設定寬度， inline-block 可以設定 width，但 inline 不行

  • margin: auto：inline-block 雖然能設定 width，但繼承了 inline 特性，儘管設定了 margin: auto 也無法改變 margin-left 與 margin-right 為 0 特性，所以無法水平置中

Conclusion

  • Block 若不設定 width，也無法使用 margin: auto，因為會直接撐滿一整行，沒有 margin 可言，故無法水平置中
  • Block 若有設定 width，則 margin: auto 可藉由 width 計算出 margin 空間，故可水平置中
  • Inline 無法設定 width，故 margin-left 與 margin-right 永遠為 0，連 margin: auto 也無法改變，故無法水平置中
  • Inline-block 繼承了 inline 特性，雖然可以設定 width，但 margin-left 與 margin-right 永遠為 0，連 margin: auto 也無法改變，故無法水平置中

# CSS