明示的な `line-height` を使用せずに要素でテキストの垂直配置を実現するにはどうすればよいですか?

の謎の垂直方向の配置要素

Web 開発の世界では、<ボタン>この要素は、テキストを垂直方向の中央に配置するという一見魔法のような機能で私たちを困惑させることがよくあります。この謎を解明するために、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>

このシナリオでは、 内のテキストは、明示的な line-height プロパティがないにもかかわらず、要素は中央に配置されたままです。

ブラウザの魔法を詳しく調べる

ブラウザのレンダリングを検査すると、内部にネストされている非表示の要素が見つかります。 タグ。 Firefox では、これは moz-button-content と呼ばれます。この要素は、ブラウザのユーザー エージェント スタイルシートで次のように定義されます。

<code class="css">*|*::-moz-button-content {
  display: block;
}</code>

この非表示要素は、テキストを垂直方向の中央に配置する上で重要な役割を果たします。これはブロック要素として表示されるように設定されており、要素がボタンの利用可能な高さ全体を占めることになります。この要素内では、テキストは自然に中央に揃えられます。

ハードコードされた垂直方向の配置

ただし、これがすべてではありません。ブラウザでは、

に対して追加のハードコーディングされた動作が採用されています。 elements:

<code class="cpp">// Center child in the block-direction in the button
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);</code>

このコードは、ブラウザが moz-button-content 要素内のテキストの両側に余分なスペースを意図的に追加し、効果的に垂直方向の中央に配置することを示しています。

すべて一緒に

要約すると、

の垂直方向の配置は、要素は 2 つの要素から生じます。

• moz-button-content 要素の存在。この要素はテキストをブロックとして表示し、自然に中央に揃えます。
• ハード- moz-button-content 要素をボタン内の中央に配置するコード化されたブラウザー動作。

以上が明示的な `line-height` を使用せずに要素でテキストの垂直配置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。