多くの場合、常に要素の行を垂直方向に整列する必要があります。以前は、通常は float を使用し、場合によっては、margin またはpadding を設定するしかありませんでした。
私は上記の方法が本当に好きではありません。 Float は要素の行を上部にのみ整列させることができます。垂直方向に整列させたい場合は、個別に調整する必要があります。 Position:absolute は、周囲の要素に影響を与えないように、ドキュメント フローから要素を取り除きます。マージンやパディングを設定すると、CSS がエレガントではなくなります。
しかし、垂直方向の配置は私の目を輝かせるので、もっと注目されるべきだと思います。技術的に言えば、垂直配置レイアウトの使用はこの問題を解決するために生まれたものではないため、ハックです。これは、テキストと要素の隣にテキストを配置するために使用することを目的としています。それにも関わらず、vertical-align を使用すると、要素のサイズを知る必要がなく、すべての要素が依然としてドキュメント フロー内にあるため、さまざまなコンテキストで要素を柔軟かつきめ細かく整列させることができます。
Vertical-Align を使用するための条件
vertical-align は、インライン要素を整列させるために使用されます。つまり、これらの表示属性 inline、inline-block、および inline-table (この記事では説明しません) に作用します。
inline-block 名前が示すように、ブロックレベルの要素は、幅、高さ、ボーダー、マージン、パディングを持つことができます。
一方、インライン要素は、長さの限り次々に配置されます。現在の行には他の要素があるため、インライン要素を収容するためのスペースが必要です。スペースがない場合は、下に新しい行を作成します。これらのインライン要素はライン ボックスと呼ばれます。
行ボックスには行内のすべてのコンテンツが含まれます。行内の要素のサイズは行ボックスの高さに影響します。下の図は、ライン ボックスの上部と下部がどのように定義されているかを示しています。 2 本の赤い線の間のスペースはライン ボックスを表します。最も重要な参照点であるライン ボックスには、要素のベースラインが関係し、場合によっては、要素のボックス モデルの上端と下端が非常に重要になります。下の図では、関係する要素のベースラインと外端を直感的に見ることができます
赤い線は行の高さの上端と下端を表し、緑の線はテキストの高さ (フォント サイズ) を表します、青い線がベースラインです。 上の左の図の行の高さはフォントサイズと等しいので、赤い線と緑の線が重なっています。中央の図の行の高さはフォント サイズの 2 倍、右の図の行の高さはフォント サイズの 1/2 です。 インライン要素の外端は上端と揃えられます。上の右図に示すように、行の高さの下端は、行の高さがフォントの高さよりも小さいにもかかわらず、インライン要素の外端は依然として赤い線です。 さらに、インライン要素のベースラインがフォントの高さの半分よりも低いことがわかります。
inline-block 要素
左から右に、inline-block 要素にはインフロー (ドキュメント フローから分離されていない) コンテンツがあり、inline-block 要素にはインフロー コンテンツがありますがオーバーフローがあります。 hidden,inline -block 要素内にアウトフロー コンテンツがあります (コンテンツ領域には高さがあります)。
赤い線はマージンの端を表し、黄色の線は境界線、緑の線はパディング、コンテンツは青の領域、青の線はベースラインを表します。
inline-block 要素の外側の端は、マージンボックスの上端と下端。
inline-block 要素のベースラインは、要素にインフロー コンテンツがあるかどうかに依存することがわかります。
上の左側の図のベースラインは、前のコンテンツ要素のベースラインです。
この時点で、中央の図はオーバーフロー属性を非表示に設定します。ベースラインは、インラインブロック要素のマージンボックスであり、それ自体の下端です。右の図のベースラインはまだマージン ボックスの下端です。
Line Box
<span class="center"> <span class="middle bg-grey">This</span> <span class="tall box bg-grey text-top"> </span> <span class="top bg-grey">can</span> <span class="tall box bg-grey text-bottom"> </span> <span class="bottom bg-grey">happen.</span></span>
.text .middle { display: inline-block; vertical-align: middle;}.text figure .box { min-width: 1em; min-height: 1em;}.text .text-top { display: inline-block; vertical-align: text-top;}.text .top { display: inline-block; vertical-align: top;}.text .text-bottom { display: inline-block; vertical-align: text-bottom;}.text figure .box.tall { height: 2em;}.text .bottom { display: inline-block; vertical-align: bottom;} 上記から、vertical のいくつかの属性値の違いが明確にわかります。
CSS 2.1 は行ボックスのベースラインの位置を定義していないことに注意してください。? W3C 仕様
行ボックスのベースラインは表示されませんが、行の先頭に文字 x を追加できます。上の図では、この文字がまったく位置合わせされていないため、文字はデフォルトのベースラインになります。
Vertical-Align 属性値
オレンジ色の線は、ライン ボックスのベースラインを表します。ご覧のとおり、inline-block 要素の垂直中線 (ベースライン) がライン ボックスのベースラインと交差しています。縦方向のフォントの高さの半分の位置を加えます。
text-top と text-bottom
元の絵が良くないので、単純に作っただけです
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">*{ margin: 0; padding: 0;}div{ font-size: 12px; line-height: 100px; border:1px solid blue;}span{ line-height: 16px; padding:5px; display: inline-block; border: 1px solid red;}#a{ vertical-align:text-top;}#b{ vertical-align:text-bottom;}</style></head><body><div> <span id='a'>text-top</span>xxx<span id='b'>text-bottom</span></div></body></html>
一番外側の青い線は、xxx の行の高さの外縁です。ターゲットとなるフォントの上端と下端 (行の高さではありません) に移動します
上端と下端
今回は、行の高さの上端と下端をターゲットにします。
垂直配置がそのように動作する理由
ここで、いくつかの特定のシナリオ、特に物事がうまくいかない可能性があるシナリオでの垂直配置の適用を見てみましょう。
アイコンを縦方向に中央揃え
上に点の補助線を追加
ラインボックスのベースラインの移動
これは一般的なトラップです。ライン ボックスのベースラインは行内のすべての要素の影響を受け、ほとんどの垂直方向の配置属性 (上と下を除く) がこのベースラインの影響を受けます。
高さ全体 (行ボックスの行の高さの上端と下端) を占める要素が行内にある場合、スペースがないため、現時点では高い方の要素の垂直方向の位置合わせは機能しません。この記事の内容が役立つと思われる場合は、行全体のベースラインがショート要素のベースラインになります。ご褒美をあげてください:
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
