CSSのvertical-align属性を解釈する

構文:

vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length

パラメータ:
baseline: valign 機能をサポートするオブジェクトのコンテンツをベースラインに揃えます
sub: 垂直方向に揃えられたテキストの下付き文字
super: 垂直方向に揃えられたテキストの上付き文字
top: valign 機能をサポートするオブジェクト オブジェクトのコンテンツをオブジェクトの上部に位置合わせします
text-top: valign 機能をサポートするオブジェクトのテキストをオブジェクトの上部に位置合わせします
middle: オブジェクトのコンテンツを位置合わせしますvalign 機能をサポートするオブジェクトのテキストをオブジェクトの中央に配置します
bottom: valign 機能をサポートするオブジェクトのテキストをオブジェクトの中央に配置します オブジェクトの下部を配置します
text-bottom: サポートするオブジェクトのテキストをオブジェクトの中央に配置しますオブジェクトの先頭への valign 機能
length: CSS2 浮動小数点数と単位識別子またはパーセンテージで構成される長さの値。マイナスになることもあります。ベースラインからのオフセットを定義します。ベースラインは数値の場合は 0、パーセンテージの場合は 0% です。現在、IE5 はサポートしていません。長さの単位を参照してください

説明:

オブジェクトの内容の垂直方向の配置を設定または取得します。
対応するスクリプト機能はverticalAlignです。私が書いた他の本もご覧ください。

例:

td { vertical-align : center; }

css 何故vertical-align: middleをspanに追加しても機能しないのでしょうか？

vertical-align は、特定の表示スタイル (セル表示モード: table-cell など) の要素でのみ機能します。したがって、上下の垂直方向の中央揃えを実現するには、次のスタイルを使用できます

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:middle;   /*垂直居中对齐*/

line-height 属性の設定と比較して、上記の設定方法はテキストが複数行ある状況に対応しています。

以下は例です:

Html要素の作成

<div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>

div{ width:200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;

vertical-align: top; 意味

インライン要素のベースラインは、その要素が配置されている行のベースラインに対して垂直方向に配置されます。 -bottom | 継承
たとえば、top はテキストの上部を垂直に配置することを意味します。
テーブルでは、この属性はセルの内容の配置を制御する td にあります。
内部オブジェクトの位置
この属性はさまざまなブラウザで同じ効果がありますが、同じではないため、注意して使用してください

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