垂直配置とはどういう意味ですか?使い方？-CSSチュートリアル-php.cn

垂直配置とはどういう意味ですか?使い方？

不言

リリース： 2019-04-12 14:29:51

オリジナル

9324 人が閲覧しました

vertical-align は、要素の垂直方向の配置を設定するために使用できる CSS のプロパティです。vertical-align プロパティの使用法を詳しく見てみましょう。

垂直配置とはどういう意味ですか?使い方？

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

vertical-align 属性には多くの値があります:

baseline: デフォルト。要素は親要素のベースライン上に配置されます。

sub: 垂直方向に配置されたテキストの下付き文字。

super: テキストの上付き文字を垂直方向に整列します

top: 要素の上部を行の最上位の要素の上部に整列させます

text-top: 整列します要素の上部と親要素の上部要素のフォントの上揃え

middle: この要素を親要素の中央に配置します。

bottom: 要素の上部を行の最下位の要素の上部に揃えます。

text-bottom: 要素の下端を親要素のフォントの下端に揃えます。

length:

%: 「line-height」属性のパーセント値を使用して、この要素を配置します。負の値も許可されます。

inherit:vertical-align 属性の値を親要素から継承することを指定します。

例: vertical-align top は、テキストの上部を垂直方向に揃えます。

テーブルでは、この属性はセルの内容の配置を設定します。垂直方向の配置は、内部オブジェクトの位置を制御するために td で最も一般的に使用されます。

具体的な例を見てみましょう:

<html>

<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>

<p>
这是一幅<img  class="top" border="0" src="/i/eg_cute.gif" / alt="垂直配置とはどういう意味ですか?使い方 ？" >位于段落中的图像。
</p> 

<p>
这是一幅<img  class="bottom" border="0" src="/i/eg_cute.gif" / alt="垂直配置とはどういう意味ですか?使い方 ？" >位于段落中的图像。
</p>

</body>

</html>

ログイン後にコピー

ランニング効果は次のとおりです:

垂直配置とはどういう意味ですか?使い方？