(翻訳) 垂直配置について: 知っておくべきこと_html/css

(翻訳) 垂直配置について: 知っておくべきこと_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:42:36

オリジナル

958 人が閲覧しました

多くの場合、常に要素の行を垂直方向に整列する必要があります。以前は、通常は 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 の行の高さの外縁です。ターゲットとなるフォントの上端と下端 (行の高さではありません) に移動します

上端と下端

今回は、行の高さの上端と下端をターゲットにします。

垂直配置がそのように動作する理由

ここで、いくつかの特定のシナリオ、特に物事がうまくいかない可能性があるシナリオでの垂直配置の適用を見てみましょう。

アイコンを縦方向に中央揃え

上に点の補助線を追加

ラインボックスのベースラインの移動

これは一般的なトラップです。ラインボックスのベースラインは行内のすべての要素の影響を受け、ほとんどの垂直方向の配置属性 (上と下を除く) がこのベースラインの影響を受けます。

高さ全体 (行ボックスの行の高さの上端と下端) を占める要素が行内にある場合、スペースがないため、現時点では高い方の要素の垂直方向の位置合わせは機能しません。この記事の内容が役立つと思われる場合は、行全体のベースラインがショート要素のベースラインになります。ご褒美をあげてください: