CSSのvertical-align属性の使い方を詳しく解説

vertical-align の定義

W3C でのvertical-align の定義:vertical-align 属性は、要素の垂直方向の配置を設定します。このプロパティは、インライン要素のベースラインの、要素が表示される行のベースラインに対する垂直方向の配置を定義します。負の長さの値とパーセント値を指定できます。これにより、要素が上がるのではなく下がります。表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します。

テキストは通常​​、目に見えないベースラインに基づいて配置され、文字の下端がその上に配置されます。 vertical-align プロパティを使用すると、文字や画像をテキストのベースラインの上または下に上げたり下げたりできます。 vertical-align 属性の値には、baseline、sub、super、top、text-top、middle、bottom、text-bottom などが含まれます。初期値は Baseline です。

baseline (ベースライン) - 子要素のベースラインを親要素のベースラインに合わせます。画像やオブジェクトなど、ベースラインのない要素の場合は、その下端を親要素のベースラインに合わせます。

sub (below) - 要素を下 (下付き文字) に置き、特に要素のベースラインを親要素の優先下付き文字位置に揃えます。

super (above) - 要素を上に配置します (上付き)。具体的には、要素のベースラインを親要素の優先上付き位置に合わせます。

text-top - 要素の上部をその親要素の最も高い文字の上部に揃えます。

top - 要素の上部を行内の最も高いものの上部に揃えます。

middle - 要素を垂直方向の中央に配置します。

bottom (bottom) - 要素の下部を行の最下位のものの下部に揃えます。

text-bottom (text-bottom) - 要素の下部を親要素のフォントの下部に揃えます。

vertical-align の解釈

W3C におけるvertical-align の定義は、大きく 2 つの部分に分けることができます:

最初の使用方法として、まず次の文を見てください。「表のセルでは、この属性は "設定されます"セル ボックス内のセルの内容の配置。」 これは理解しやすいです。表の td にvertical-align:middle スタイルを追加すると、表の内容が垂直方向の中央に配置されます。同様に、次のように指定すると、 vertical-align:bottom を指定すると下が揃えられ、vertical-align:top を指定すると上が揃えられます。

2 番目の使用法については、前のページの文を読んでください。「この属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。」専門的な言葉を話す方法について、例を示します。a と b の 2 つのインライン要素があり、a と b が両方とも img であるとします。a がvertical-align:middle スタイルで追加されると、b の下部 (ベースライン) が次のようになります。以下に示すように、a の中間位置に揃えられます:

a と b の両方が の場合、vertical-align:middle スタイルを追加すると、互いの中間位置が揃えられます。つまり、垂直方向の中心線は次のようになります。以下に示すように位置合わせされます:

たとえば、img と span が一緒に表示され、テキストを画像と位置合わせしたい場合は、画像の中央の位置に img{vertical-align:middle;} を追加する必要があります。画像

別の例として、入力とスパンを一緒に使用する場合、Google Firefox IE8 以降のデフォルトでは、スパンは入力の中央の位置にありますが、ie6/ie7 では、スパンの下部が入力の中央の位置に配置されます。統合を実現する方法は、入力に input{vertical-align:middle;} を追加することです。垂直方向の中心線を揃えたい場合は、span{vertical-align:middle;} をスパンに設定します。

vertical-align の使用法

1. インライン要素に使用します

以下では、vertical-align 属性の使用法を示す例として画像の垂直方向の配置を使用します。

img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>

2. テーブルで使用

vertical-align 属性はテーブルのセルで直接使用でき、その効果は HTML の valign 属性と同等です。

td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>

3. ブロック要素に使用されます

vertical-align 属性はブロック要素には適用されないため、vertical-align 属性を無効にする人もいます。ただし、display 属性を使用し、その値を table-cell に設定し、ブロック要素をセルに変換してから、vertical-align 属性を使用することができます。

div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>

上記の方法には互換性の問題があることに注意してください。 IE6/IE7、および World Window、360、Aoyou などの IE をコアとしたブラウザやその他のブラウザはこの使用法をサポートしていませんが、Chrome と Firefox はサポートしています。

ie6/7と互換性を持たせるために、div

div{
*display:block;
 
*font-size:175px;/*高度为200px，  则200*0.873约为175px* 撑开/ 
 }

に次の属性を追加できます。

以上がCSSのvertical-align属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。