line-height とvertical-align_html/css_WEB-ITnose についての深い理解

× 目次 [1] 行の高さ [2] 垂直方向の配置 [3] アプリケーション

前の単語

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

line-height

定義

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

適用対象: すべての要素

継承: はい

パーセンテージ: 要素のフォント サイズに相対 font-size

用語

line-height を詳しく理解するには、以下を行う必要があります。ラインボックスの構造を理解する 一般的に使用される用語。

コンテンツエリア

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

インライン ボックス

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

ライン ボックス

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

ボックスのプロパティ

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

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

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

margin-left、padding-left、border-left が適用されます要素の先頭; margin-right、padding-right、border-right は要素の末尾に適用されます。

置換要素

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

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

vertical-align

定義

Vertical-align は、垂直方向の配置、すべての行の高さに影響します。値: ベースライン

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

継承: なし

パーセンテージ: 要素の行の高さに対する相対値

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

vertical-align:baseline(元素的基线与父元素的基线对齐)vertical-align:sub(降低元素的基线到父元素合适的下标位置)vertical-align:super(升高元素的基线到父元素合适的上标位置)vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)vertical-align:inherit(从父元素继承vertical-align属性的值)

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

を引き継ぎます

inline-blockbottom

inline-block要素はギャップを残します画像のデフォルトの垂直方向の配置はベースライン配置であるため (原則として、画像の下端は匿名テキストの大文字の英語文字 X の下端に揃えられます)、匿名テキストはブロックレベル要素内にあります。線の高さがあるため、ギャップの下端の間には距離があります

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

　　[1]display:block

　　因为垂直对齐方式只能作用于替换元素和行内元素，更改为块级元素，会使垂直对齐方式失效

　　[2]父级的line-height: 0

　　这样使匿名文本与行框的距离为0

　　[3]vertical-align: top/middle/bottom

 

应用

【1】单行文本水平垂直居中

div{    line-height: 100px;    width: 100px;    text-align: center;    border: 1px solid black;}

<div>测试文字</div>

　　[注意]好多地方都写着单行文本垂直居中是将高度和行高设置成一样的值，但高度其实是没有必要设置的。仅仅设置行高就可以，文字在一行中本身就是垂直居中显示扫

【2】图片近似垂直居中

div{    line-height: 200px;    text-align: center;}img{    vertical-align: middle;}

<div>    <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy" alt="#"></div>

　　由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显

　　[注意]IE7浏览器在写块级元素包含行内元素时一定要写成换行写法，而不要写在一行

//正确1<div>    <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy" alt="#"></div>//正确2
//错误

【3】图片完全垂直居中

　　在方法2的基础上设置块级元素的font-size为0，则可以设置图片完全垂直居中

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

<div>    <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy" alt="#"></div>

【4】多行文本水平垂直居中

　　由于方法3设置font-size为0的局限性，块级元素里面无法放置文本。方法4主要通过新增元素来实现垂直居中效果，该方法也可用于图片的水平垂直居中

div{    height: 100px;    width: 200px;    background-color: pink;    text-align: center;}span{    display:inline-block;    vertical-align: middle;    line-height: 20px;    width: 100px;}    i{    display: inline-block;    height: 100%;    vertical-align: middle;}

    <div>        <i></i>        <span>我是特别长的特别长的特别长的特别长的多行文字</span>    </div>    

【5】图标和文本对齐

使用长度负值

img{    vertical-align: -5px;}

　　根据实践经验，20*20像素的图标后面跟14px的文字，vertical-align设置为-5px可以达到比较好的对齐效果

使用文本底部对齐

img{    vertical-align: text-bottom;}

　　使用baseline会使图标偏上；使用top/bottom会受到其他行内元素影响造成定位偏差；使用middle需要恰好的字体大小且兼容性不高；使用text-bottom较合适，不受行高及其他内联元素影响