要素はどのようにして縦方向のテキストの中央揃えを実現するのでしょうか?

でテキストを垂直方向に中央揃えにします要素

<ボタン>を使用する場合要素内にあるテキストが自動的に垂直方向の中央に配置されることに気づくかもしれません。この動作は、ブラウザー定義のスタイル、特定の HTML および CSS の側面などの要因の組み合わせに起因する可能性があります。

HTML 構造と要素の階層

< 内ボタン＞要素を使用すると、Firefox やその他のブラウザは moz-button-content と呼ばれる内部要素を作成します。この要素は

の間に配置されます。タグとその子。重要なのは、表示ブロックに設定されており、CSS がそのスタイルに直接影響するのを防ぐことです。

ブラウザによる垂直方向の配置

Firefox では、ブラウザにより、ボタンの内容。これを担当するコードは、ソース ファイル「nsHTMLButtonControlFrame.cpp」内にあります。具体的には、ボタン内の余分なスペースを計算し、それに応じて childPos.B() 値を調整し、子コンテンツが利用可能なスペース内で中央に配置されるようにします。

垂直方向の中央揃えにおける高さの役割

<ボタン> の高さの値を指定します。 moz-button-content 要素のデフォルトの動作をオーバーライドするため、垂直方向の中央揃えが有効になります。高さを指定しないと、moz-button-content 要素はそのコンテンツと同じ高さになるため、ボタン内で下揃えになります。高さを割り当てることで、ボタン内に追加のスペースが作成され、ブラウザによる中央揃えが有効になります。

例

次の例を考えてみましょう:

<button>Button content</button>

CSS:

button {
  height: 48px;
}

この場合、moz-button-content 要素の表示ブロックの性質にもかかわらず、ボタンのコンテンツは高さ 48 ピクセル以内で垂直方向の中央に配置されます。

以上が要素はどのようにして縦方向のテキストの中央揃えを実現するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。