ボタンのテキストはデフォルトで垂直方向の中央に配置されるのに、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>

これらのスタイルを適用するときは、 内のテキストが

要素内のテキストは垂直方向に配置されます。

不思議な魔法

デフォルトでは、<ボタン>要素には、moz-button-content という組み込み要素があります。この要素には CSS 経由でアクセスすることはできず、ボタンの高さを継承してブロックが表示されます。ただし、ブラウザの内部コードには、ボタンのコンテンツを moz-button-content 要素の中央に垂直方向に配置するハードコーディングされたルールが含まれています。

Div 内のテキストの中央揃え

-webkit-box-align プロパティは、

内のテキストを中央揃えにする場合には機能しません。なぜなら

要素には、moz-button-content のような組み込み要素はありません。

内のテキストを中央揃えにするには、div の高さと同じ line-height を使用できます。

結論

内のテキストの垂直方向の中央揃え要素は、moz-button-content 要素とブラウザのハードコーディングされた垂直位置ルールの組み合わせによって発生します。対照的に、

内のテキストを中央揃えにすると、要素では line-height を使用する必要があります。