ホームページ >ウェブフロントエンド >CSSチュートリアル >垂直配置とはどういう意味ですか?使い方 ？
垂直配置とはどういう意味ですか?使い方 ？
- 不言オリジナル
- 2019-04-12 14:29:519323ブラウズ
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>ランニング効果は次のとおりです:
この記事のすべてはここにあります。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの CSS ビデオ チュートリアル 列に注目してください。 ！ ！
以上が垂直配置とはどういう意味ですか?使い方 ？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。