我一直很想寫這系列的文章，一來是 CSS 博大精深，有太多難解的觀念在裡頭。二來是常常要切很多重複卻又複雜的版型，所以想要系統化這些資訊，供日後快速查閱。

因此，這系列算是我自己的筆記，也算是經驗分享吧！也希望能幫到各位 m(_ _)m

廢話不多說，直接上重點 XD。

對齊語法有哪些

對齊有兩種，一種是水平對齊，一種是垂直對齊。

在 CSS 的世界裡，比較直覺的對齊語法有 text-align 以及 vertical-align。前者通常用來對齊文字，後者不熟練的人通常用了會失效(炸)。

當然，除了這兩種之外，CSS 還有其他語法也可以拿來對齊，例如：

• margin
• padding
• position
• line-height
• display (grid, flex)
• transform

以上這些語法，都可以幫助我們對齊，但首先，需要了解設計稿要的是哪種對齊？再針對之使用對應的語法，才可以一擊必殺，正確且迅速的做好版面。

可以讓元件水平置中的 text-align

text-align 雖然直譯為文字置中，但其實只要是元件，都可以使用這個語法來置中。

text-align 的特性為：可以置中(裡面的)元件，不能置中(自己本身的)版面。如以下程式碼：

<div class="box">
  <div class="item">
  Hello, MUKI
  Nice to meet you
  </div>
  <div class="item">
      <img src="http://placehold.it/100/100" alt="" />
  </div>
</div>

假使在 .box 使用 text-align:center，.box 裡面的所有元件會置中，但他自己(版面)不會置中。

又，假使將 text-align 寫在父元件，那所有的子元件都會受到影響而置中。

/* box 裡面所有的子元件都會置中 */
.box {
  text-align: center;
}

也可以寫在子元件上，這樣就只有子元件自己會置中。

/* item 這個子元件會置中 */
.item {
  text-align: center;
}

只適用於行內元素與表格的 vertical-align

大家對 vertical-align 常常有一種誤解，覺得他跟 text-align 用法一樣，只要寫上去，那麼所有的子元素就會乖乖的垂直置中。

只能說，夢想與現實往往是相反的 XD，別以為他們都有個 align 就是親兄弟啦 XD

vertical-align 最大的一個特性是，只適用於行內元素(inline)，也就是只適用於預設為 display:inline 的元素。

因此要讓兩個 div，或是兩個 p 垂直置中是辦不到的，因為他們預設都是 display:block。

而 img 以及 a 預設為 display:inline，所以如果要做一個簡單的圖文置中，可以直接用該語法：

<div class="box">
  <span>Hello, this is MUKI</span> <img src="http://placehold.it/100/100" />
</div>

.box img {
  vertical-align: middle;
}

▼ 結果如下：

但現實情況下，我們可能會碰到多行文字的需求。如果單純用 br 換行，會被視為兩個行元素，所以圖片只會跟最後一個行元素對齊，

▼ 如下圖所示：

碰到這種狀況該如何處理呢？

所幸，除了 display:inline 可做為行內元素外，display:inline-block 也是算作行內元素的一份子唷 (外層是 inline，內層是 block)。

我們可以試著將 span 設成 inline-block 看看效果：

.box__text span {
  display: inline-block;
}

看起來是置中了～，但如果你是個對置中有所追求的設計師，會覺得他好像不是真的置中。

原因是 vertical-align:middle 的對齊依然以從 br 斷開的這個行內為對齊元素。亦即，他對齊的對象是最後一行的 Who are you?，而非兩句加起來的 Hello, this is MUKI. Who are you?

▼ 我們可以試著讓文字變成三行、四行...等，就會更清楚地發現，永遠只有最後一行文字跟右側的圖片垂直置中。

接下來你可能會好奇，那我們還可以用 vertical-align 解決這個問題嗎？

答案是肯定的！(不然他的存在也太雞肋了 XDDDD)

在標題有提到，他可以用在行內元素跟表格，所以碰到這樣的切版，我們還有最後一招，就是用表格去解，將元素改為 display: table-cell 即可。

<div class="box">
  <div class="box__text">
    <span>Hello, this is MUKI
    Who are you?
    This is Line Three.</span>
  </div>
  <div class="box__text">
    <img src="http://placehold.it/100/100" />
  </div>
</div>

.box__text {
  display: table-cell;
  vertical-align: middle;
}

承上，如果要在表格使用 vertical-align，就直接將元素改為 display: table-cell，然後加上 vertical-align:middle 即可。

▼ 這樣就會是兩個 table-cell 的置中了。

相關文章

除了兩大 align 哥外，還有其他 CSS 語法也可以幫我們對齊版面或元件，歡迎看下篇

9

6

1

發生錯誤。