行の高さと垂直方向の整列_HTML/Xhtml_Web ページの制作についての包括的な理解

前の単語

line-height、font-size、vertical-align は、インライン要素のレイアウトを設定するための重要な属性です。これら 3 つのプロパティは相互に依存しており、線間の距離の変更、垂直方向の配置の設定などはすべて連携する必要があります。 font-size に関連する内容は CSS Font で詳しく紹介していますので、この記事では主に line-height とvertical-align について紹介します。

行の高さ

定義

行の高さは、テキスト行のベースライン間の距離を指します。 line-height は実際には、インライン要素とその他のインライン コンテンツにのみ影響し、ブロック レベルの要素には直接影響しません。ブロック レベルの要素に line-height を設定することもできますが、この値はブロックのインライン コンテンツにのみ適用されます。レベル要素が影響を与えるのはその場合だけです。ブロックレベル要素で行の高さを宣言すると、ブロックレベル要素

のコンテンツの行ボックスの最小高さが設定されます。

値: |

初期値：通常

適用対象: すべての要素

継承: はい

パーセンテージ: 要素のフォント サイズに対する相対値

規約 行の高さを深く理解するには、行ボックスの構築に関する一般的な用語を理解する必要があります。

コンテンツエリア

インラインの非置換要素または匿名テキストの一部の場合、font-size と font-family によってコンテンツ領域の高さが決まります。 Song Diagnostic の場合、インライン要素のフォント サイズが 15 ピクセルの場合、コンテンツ領域の高さは 15 ピクセルです。他のフォントの場合、コンテンツ領域の高さはフォント サイズと等しくありません。 >

インラインボックス

コンテンツ領域に行間隔を加えたものがインライン ボックスと同じになります。インライン非置換要素の font-size が 15px で、line-height が 21px の場合、その差は 6px です。ユーザー エージェントはこれらの 6 ピクセルを半分に分割し、半分をコンテンツ領域の上部と下部に適用し、インライン ボックス

を作成します。

line-height が font-size より小さい場合、インライン ボックスは実際にはコンテンツ領域よりも小さくなります

ラインボックス

ライン ボックスは、ライン内の最も高いインライン ボックスの上部と最も低いインライン ボックスの下部の間の距離として定義され、各ライン ボックスの上部は、前のライン ボックスの下部の隣にあります。行

ボックスのプロパティ

パディング、マージン、境界線は行ボックスの高さに影響しません。つまり、行の高さには影響しません

インライン要素の境界線は、line-height ではなく font-size によって制御されます

インラインの非置換要素の上下にはマージンは適用されません

Margin-left、padding-left、および border-left は要素の先頭に適用され、margin-right、padding-right、および border-right は要素の末尾に適用されます。

要素を置換 インライン置換要素では、要素が垂直方向に整列されたときに正しく配置されるように、行の高さの値を使用する必要があります。これは、vertical-align のパーセンテージ値が要素の line-height を基準にして計算されるためです。垂直方向の配置の場合、画像自体の高さは重要ではありません。重要なのは line-height の値です。

デフォルトでは、インライン置換要素はベースラインに配置されます。置換された要素に下部のパディング、マージン、または境界線を追加すると、コンテンツ領域が上に移動します。置換された要素のベースラインは、通常のフローの最後の行ボックスのベースラインです。置換要素のコンテンツが空であるか、そのオーバーフロー属性値が表示されない限り、この場合、ベースラインはマージンの下端になります

垂直配置

定義 vertical-align は、垂直方向の配置を設定するために使用されます。垂直方向に配置されたすべての要素が行の高さに影響します。

値: サブ | テキスト | ボトム |

初期値：ベースライン

適用対象: インライン要素、置換要素、表のセル

継承: なし

パーセンテージ: 要素の行の高さを基準

[注意] IE7ブラウザのvertical-alignのパーセント値は小数点行の高さをサポートしておらず、baseline、middle、text-bottomなどの値を取る場合、表示効果はそれとは異なります。標準ブラウザの一般的な解決策は、インライン要素に display:inline-block

を設定することです。

CSS コード

コンテンツをクリップボードにコピーします

1. vertical-align:baselinebaseline (要素のベースラインは親要素のベースラインと位置合わせされます) )
2. vertical-align:sub (要素のベースラインを親の適切な添字位置まで下げます)要素)
3. vertical-align:super (要素のベースラインを親要素の上付き文字の適切な位置まで上げます)
4. vertical-align:bottombottom(整列した子の下端を揃える)要素の末尾は行ボックスの下端に揃えられます)
5. vertical-align:text-bottom(要素の下端を親要素の下端に揃えます)要素のコンテンツ領域の端揃え)
6. vertical-align:top(整列した子要素の上部を行の上部に揃えます)ボックス)
7. vertical-align:text-top(要素の上端を親要素の上端に揃えます)要素のコンテンツ領域)
8. vertical-align:middle(要素の中点と親要素のベースラインに 1 を加えたもの) /2 親要素の文字 X の高さ調整)
9. vertical-align:(-n)px (要素はベースラインに対して npx ずつ上下にオフセットされます)
10. vertical-align:x% (要素の line-height 値に相対)
11. vertical-align:inherit (親要素から vertical-align 属性の値を継承)

[注] _{と ^{は、デフォルトで、vertical-align:sub/super}}

を継承します。

インラインブロックの下部のギャップ

画像のデフォルトの垂直方向の位置合わせがベースライン位置合わせであるため、インラインブロック要素はブロックレベル要素にギャップを残します (原則として、画像の下端は大文字の英字 X の下端と位置合わせされます)。匿名テキストの); 一方、匿名テキストは行の高さがあるため、X の下端は行の枠から一定の距離になります

したがって、この問題を解決するにはいくつかの解決策があります

[1]表示:ブロック

垂直方向の配置は置換された要素とインライン要素にのみ適用できるため、ブロックレベルの要素に変更すると垂直方向の配置が無効になります

[2] 親の行の高さ: 0

これにより、匿名テキストと行ボックスの間の距離が 0 になります

[3]vertical-align: 上/中/下

適用

【1】一行の文字を縦横中央揃えにします

XML/HTML コードコンテンツをクリップボードにコピー

1. div{
2. 行の高さ: 100px;
3. 幅: 100px;
4. テキスト配置: 中央;
5. 境界線: 1 ピクセルの黒一色
6. }
8. div>テストテキストdiv>

[注意] テキスト 1 行の垂直方向の中央揃えは、高さと行の高さを同じ値に設定することを意味すると多くの場所で説明されていますが、実際には高さを設定する必要はありません。行の高さを設定するだけで、テキスト自体が行の垂直方向中央に表示されます

【2】画像はほぼ縦方向中央に配置されます

XML/HTML コードコンテンツをクリップボードにコピー

1. div{
2. 行の高さ: 200px;
3. テキスト配置: 中央;
4. }
5. img{
6. 垂直配置: 中央;
7. }
8. div>
9. img src="行の高さと垂直方向の整列_HTML/Xhtml_Web ページの制作についての包括的な理解" alt="行の高さと垂直方向の整列_HTML/Xhtml_Web ページの制作についての包括的な理解">
10. div>

文字 X が em ボックス内で垂直方向の中央に配置されておらず、各フォント内の文字 X の高い位置と低い位置が一致していないためです。したがって、フォントサイズが大きいほど、違いはより明白になります

[注意] インライン要素を含むブロックレベルの要素を記述する場合、IE7 ブラウザでは 1 行で記述するのではなく、改行で記述する必要があります

Copy code

コードは次のとおりです:

//修正 1

/ /Correct 2

//エラー

【3】写真が完全に縦方向中央に配置される

方法 2 に基づいて、ブロックレベル要素のフォントサイズを 0 に設定すると、画像が完全に垂直方向の中央に配置されるように設定できます

コードをコピーします

コードは次のとおりです。

div{ line-height: 200px; font-size: 0;}img{vertical-align; : middle;}

コードをコピーします

コードは次のとおりです:

【4】複数行のテキストを縦横中央揃えにする

方法 3 では font-size を 0 に設定するという制限があるため、テキストをブロックレベルの要素に配置することはできません。方法 4 は主に、新しい要素を追加することで垂直方向のセンタリング効果を実現します。この方法は、画像の水平方向および垂直方向のセンタリングにも使用できます。

XML/HTML コードコンテンツをクリップボードにコピー

1. div{
2. 高さ: 100px;   
3. 幅: 200px;   
4. 背景色: ピンク;   
5. text-align: center;   
6. }
7. スパン{
8. display:inline-block;   
9. vertical-align: middle;   
10. 行の高さ: 20px;   
11. 幅: 100px;   
12. }
13. 私{
14. display: inline-block;   
15. 高さ: 100%;   
16. vertical-align: middle;   
17. }

XML/HTML コード复制コンテンツ到剪贴板

1. div>
2. 私>私>スパン>我は特别长的特别长的特别长的多行文字スパン>
3. div>

【5】图标和文本对齐

使用長度负值

复制代

代码如下:

img{垂直整列: -5px;}

使用文本底部对齐

复制代代码如下:

img{垂直配置: テキスト下部;}

使用ベースライン会使用図标偏上; 使用トップ/ボトム会は他の行内要素の影響を受けて位置ずれが発生します; 使用中必要適切な文字体の大きさと互換性は高くありません; 使用テキストボトム较合适、不受行高及その他内联元素影响

以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。

翻訳：

http://www.cnblogs.com/xiaohuochai/p/5271217.html