「要素」のテキストがデフォルトで垂直方向に中央揃えになるのはなぜですか?

<ボタン> 内のテキストの配置方法要素が垂直方向の中央に配置されます

HTML では、<ボタン>要素は通常、アクションをトリガーしたり、別の Web ページに移動したりするボタンを作成するために使用されます。ただし、これらのボタン内のテキストの垂直方向の配置については、興味深い観察があります。垂直方向の配置プロパティを明示的に指定していないにもかかわらず、 内のテキストは要素は一貫して中央に表示されます。この記事では、この整列現象に寄与する根本的なメカニズムを詳しく説明します。

の紹介要素

<ボタン>要素は、CSS を使用してカスタマイズできるクリック可能なボタンを定義します。一般的な

とは異なります。この要素には、固有のボタン機能や特定のスタイルがありません。

を使用してボタンを作成することもできます。要素、要素は、よりアクセスしやすく、意味的に意味のあるオプションを提供します。

隠し <ボタン>兄弟

レンダリングされた HTML を詳しく調べると、

が

であることがわかります。要素には追加の内部要素が含まれることがよくあります。この要素は、Firefox では「-moz-button-content」と呼ばれ、開始部分の の間にあります。タグとボタンの子コンテンツ。これは CSS から非表示になり、 の高さを継承せずに「display: block」に設定されます。

ブラウザのハードコードされた配置

内のテキストの自動中央揃えを理解するための鍵。要素はブラウザーの固有の動作にあります。 Firefox のソース コードで明らかになったように、ブラウザには のコンテンツを中央に配置するハードコーディングされたメカニズムがあります。割り当てられたスペース内の要素。この組み込みロジックにより、<ボタン> の高さに関係なく、そのテキストは常に垂直方向に配置されます。

力の結合ボタン間の相互作用隠し 兄弟とブラウザのハードコーディングされた配置により、テキストが垂直方向に中央揃えになる効果が作成されます。兄弟によって導入された余分なスペースにより、 の高さが垂直方向に 2 等分されます。次に、ブラウザの配置メカニズムにより、テキストがこのスペースの中央に配置され、効果的に垂直方向に配置されます。