CSS 垂直配置の使用法attribute_html/css_WEB-ITnose

ここ二日間、ページCSSを書く際にvertical-align属性を使っていましたが、使用中に落とし穴を踏んだので以下のようにまとめます:
vertical-alignの定義
verticalの定義W3C の -align:vertical-align 属性 要素の垂直方向の配置を設定します。このプロパティは、インライン要素のベースラインの、要素が表示される行のベースラインに対する垂直方向の配置を定義します。負の長さの値とパーセント値を指定できます。これにより、要素が上がるのではなく下がります。表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します。

テキストは通常​​、目に見えないベースラインに基づいて配置され、文字の下がその上に配置されます。 vertical-align プロパティは、文字または画像をテキストのベースラインの上または下に上げたり下げたりします。 vertical-align 属性の値には、baseline、sub、super、top、text-top、middle、bottom、text-bottom などが含まれます。初期値は Baseline です。
ベースライン (ベースライン)?? 子要素のベースラインを親要素のベースラインに合わせます。画像やオブジェクトなど、ベースラインのない要素の場合は、その下端を親要素のベースラインに揃えます。

sub (below)?? 要素を下 (下付き文字) に配置し、特に要素のベースラインを親要素の優先下付き文字位置に合わせます。

super (上)?? 要素を上に配置します (上付き)。特に、要素のベースラインを親要素の上付きの優先位置に合わせます。

text-top (text-top)?? 要素の上部をその親要素の最上位の文字の上部に揃えます。

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

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

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 に 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* 撑开/ }

**

特別な注意事項:vertical-align は、ブロック レベルの要素ではなく、インライン要素に対してのみ有効です。

**

著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。