為什麼 Button 文字預設垂直居中，而 Div 文字卻不是？

了解按鈕文字垂直對齊

考慮以下HTML 標記和CSS 樣式：

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

應用這些樣式時，您注意到 中的文字元素是垂直對齊的，而

中的文字是垂直對齊的。不是。

神秘的魔法

預設情況下， elements 有一個名為 moz-button-content 的內建元素。該元素無法透過 CSS 訪問，並且顯示塊，繼承按鈕的高度。但是，瀏覽器的內部程式碼包含一個硬編碼規則，該規則將按鈕的內容垂直放置在 moz-button-content 元素的中間。

在Div 中將文字居中

-webkit-box-align 屬性不適用於

中的文字居中因為

elements 沒有像moz-button-content 這樣的內建元素。若要將

中的文字居中，您可以使用等於 div 高度的 line-height。

結論

中文字的垂直居中；elements 是由 moz-button-content 元素和瀏覽器的硬編碼垂直定位規則的組合引起的。相比之下，將

中的文字置中。元素需要使用行高。