CSS では垂直方向の配置は実際にどのように機能するのでしょうか?
Nov 07, 2024 am 05:01 AMCSS の垂直方向の配置: ニュアンスを理解する
vertical-align プロパティを使用すると、インライン要素を親要素内で垂直方向に配置できます。ただし、基礎となる原則を理解していないと、その動作は予測できない場合があります。
インライン要素と高さ
垂直方向の配置は、インライン要素にのみ影響します。 <p> などの要素<div>はブロックレベルであり、影響を受けません。 など、固有の行の高さを持たないインライン要素の場合、
高さと垂直方向の配置
親要素の高さは静的な値である必要があります。 (つまり、自動またはパーセンテージではありません)。高さが指定されていない場合、ブラウザはコンテンツに基づいて高さを計算するため、予期しない結果が生じる可能性があります。
インライン要素の配置
text-align とは反対これは要素を含むブロックレベルに適用されますが、vertical-align は配置するインライン要素に適用する必要があります。
ブラウザの違い
古いブラウザでは使用できない場合があります。一貫して垂直方向の配置をサポートします。ただし、最新のブラウザは、非インライン要素で使用される場合でも、この機能を適切に処理します。
例: テキストの中央揃え
たとえば、次の HTML があるとします。
<div>
#inner でテキストを垂直方向に中央揃えにするには、vertical-align: middle を #header: に適用します。
#header { display: inline-block; line-height: 1em; margin: 0; vertical-align: middle; }
この例では、#inner がインラインブロックであることに注意してください。高さが固定された要素。
以上がCSS では垂直方向の配置は実際にどのように機能するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします
