ホームページ > 記事 > ウェブフロントエンド > (翻訳) 垂直配置について: 知っておくべきこと_html/css_WEB-ITnose
(翻訳) 垂直配置について: 知っておくべきこと_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:42:36894ブラウズ
多くの場合、常に要素の行を垂直方向に整列する必要があります。以前は、通常は 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 の行の高さの外縁です。ターゲットとなるフォントの上端と下端 (行の高さではありません) に移動します
上端と下端
今回は、行の高さの上端と下端をターゲットにします。
垂直配置がそのように動作する理由
ここで、いくつかの特定のシナリオ、特に物事がうまくいかない可能性があるシナリオでの垂直配置の適用を見てみましょう。
アイコンを縦方向に中央揃え
上に点の補助線を追加
ラインボックスのベースラインの移動
これは一般的なトラップです。ライン ボックスのベースラインは行内のすべての要素の影響を受け、ほとんどの垂直方向の配置属性 (上と下を除く) がこのベースラインの影響を受けます。
高さ全体 (行ボックスの行の高さの上端と下端) を占める要素が行内にある場合、スペースがないため、現時点では高い方の要素の垂直方向の位置合わせは機能しません。この記事の内容が役立つと思われる場合は、行全体のベースラインがショート要素のベースラインになります。ご褒美をあげてください: