10

私は CSS を初めて使用し、最近仕様を読んで、vertical-align プロパティを理解するのにいくつかの問題を抱えています。

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

上記のコードは 3 つの div を作成し、それぞれに 3 つの空のインライン ボックス (スパン) が含まれます。

  1. 最初の div では、すべて問題ないようです。3 つのスパンはすべて、ライン ボックスのベースラインに揃えられます。
  2. 2 番目の div で、3 番目のスパンのvertical-alignプロパティをに設定した後top、最初の 2 つのスパンが上に移動します。そして、ここから迷子になり、なぜそれらが上に移動するのか、どのルールに従っているのかわかりません。
  3. 3 番目の div は、私にとってさらに重要です。vertical-align1 番目のスパンのプロパティをに設定すると、2 番目のスパンが 3 番目のスパンよりもわずかに低くbottom移動します (これは十分に拡大するとわかります)。

仕様で見つけることができるものは以下のとおりですが、正確には何multiple solutionsですか? 誰かがこれについてもっと光を当てることができますか?

In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.

fiddleも作成しました。興味がある場合は、Firefox または Chrome で実行してください。

4

1 に答える 1

7

vertical-align主にタグなどのinline要素に使用されます。これは通常、テキスト内で正しく配置するために に設定されます。imgvertical-align: middle;

デモ(を使用せずにvertical-align)

デモ 2 (を使用vertical-align)

わかりました、これがvertical-alignの値でどのように機能するかについての一般的な考え方でしたmiddle。

まず、vertical-alignプロパティの有効な値を見てみましょう。

ここに画像の説明を入力 クレジット : Mozilla Developer Network

さあ、あなたの疑問を少しずつ解決していきましょう..

最初の例では、あなたによるとすべてがうまくいっていますが、答えはノーです。あなたはさまざまに適用line-heightしていますが、実際にはあなたが考えるように適用されていません...spanline-height

行の高さが実際には適用されていません

作るとinline-block適用される

on の使用が役に立たない理由については、この回答を読むことができます。line-heightspan

2 番目の疑問に移りましょう。1 番目、2 番目ではありますがline-height、span3span番目ではありませんspan。ここで何が起こっているのでしょうか? テキストの場合と同様に、以前に説明したようにそこでは役割を果たしませんが、それらはテキストと垂直にうまく整列されますが、 を使用するspanと、その上の他の 2 つのボックスは移動せず、代わりにテキストの上部。inlineline-heightvertical-align: top;

vertical-align: top;がテキストの上部にどのように配置されるかを確認します

あなたの最後の例に来て、ここで、最初のspan要素は期待どおりに整列されています。それはbottom正しいです。2番目に移動すると、3番目よりわずかに低いline-heightと言われました。その要素をalign垂直方向centerに最後にするものは、 に少し移動します。topこれは、実際には に整列していtopます。

それらinline-blockを作成して、実際にどのように動作するかを見てみましょう..

したがって、3 つの例すべての違いを理解していただければ幸いですが、line-heightプロパティとinline-blockプロパティについても理解する必要があります。また、私が共有した回答を参照することも忘れないでください。

于 2013-12-20T06:42:27.293 に答える