CSSで段落の垂直方向の配置を設定する方法（コード添付）-CSSチュートリアル-php.cn

CSSで段落の垂直方向の配置を設定する方法（コード添付）

yulia

リリース： 2018-09-26 15:58:11

オリジナル

3096 人が閲覧しました

Web を閲覧していると、段落が垂直方向に配置されているのをよく見かけます。この記事では、CSS を使用して段落の垂直方向の配置を設定する方法について説明します。あなたに役立ちます。

CSS では、段落の垂直方向の配置は、vertical-align 属性によって設定されます。

テキスト自体の場合、この属性は

タグや

タグなどのブロックレベルの要素には機能しないことに注意してください。

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>

<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</body>
</html>
</span>

ログイン後にコピー

上記のコードは、3 行 2 列のテーブルを作成します。これにより、セルの高さが増加し、比較の役割も果たします。

右側のテキストの列は、それぞれ上揃え、下揃え、中央揃えを採用しています。対応する CSS 値はそれぞれ上、下、中央です。

vertical-align 属性に特定の値を設定すると、テキスト自体を垂直方向に移動できます。

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>

<body>
<p>给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p>给对齐属性设置<span class="fs">具体</span>数值，负数</p>
</body>
</html>
</span>

ログイン後にコピー

上記のコードに示すように、属性値が正の数値の場合、テキストは対応する値だけ上に移動し、負の数値に設定されると下に移動します。

さらに、vertical 属性には他にも多くの値がありますが、主に画像に適用されます。

以上がCSSで段落の垂直方向の配置を設定する方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。