ホームページ > 記事 > ウェブフロントエンド > CSSで段落の垂直方向の配置を設定する方法（コード添付）
CSSで段落の垂直方向の配置を設定する方法（コード添付）
- yuliaオリジナル
- 2018-09-26 15:58:113101ブラウズ
Web を閲覧していると、段落が垂直方向に配置されているのをよく見かけます。この記事では、CSS を使用して段落の垂直方向の配置を設定する方法について説明します。あなたに役立ちます。
CSS では、段落の垂直方向の配置は、vertical-align 属性によって設定されます。
テキスト自体の場合、この属性は e388a4556c0f65e1904146cc1a846bee タグや dc6dce4a544fdca2df29d5ac0ea9906b タグなどのブロック レベルの要素には機能しないことに注意してください。
<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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。