ホームページ > 記事 > ウェブフロントエンド > CSSを使って文字の縦配置を実現する方法
CSSを使って文字の縦配置を実現する方法
- 云罗郡主オリジナル
- 2018-11-23 17:25:132937ブラウズ
この記事の内容は、CSS を使用してテキストを縦方向に配置する方法についてです。必要な方は参考にしていただければ幸いです。
#スタイル シートのテキスト処理プロパティには、writing-mode と text-align という 2 つの重要なプロパティがあります。まず使用法を見てみましょう:
1. 書き込みモード (オブジェクトの書き込み方向の設定)
構文: 書き込みモード: lr-tb、tb-rl
パラメータ: lr-tb: 左から右、上から下 tb-rl: 上から下、右から左
例:
CSS コード コンテンツをクリップボードにコピーします
div { writing-mode: tb-rl; }2. text-align (オブジェクト内のテキストの配置を設定します)
構文: text-align: left、right、center、justify
パラメータ: left : 左揃え 右揃え: 右揃え 中央揃え: 中央揃え: 両端揃え
#例:#CSS コード コンテンツをクリップボードにコピーします
div { text-align : center; }そして、通常のレイアウトのアイデア: 右テキスト オブジェクトの幅設定では、次のテキストの幅の距離のみを調整できます。テキストが 1 行に 2 文字収まらない場合、テキストは自動的に折り返されるため、縦書き組版が必要になります。
CSS コード内容をクリップボードにコピーします
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖列排版实例 在线演示 www.divcss8.com</title>
<style>
body{text-align:center}
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}
</style>
</head>
<body>
<div class="shuli">我是竖列排版</div>
</body>
</html>上記は、CSS を使用してテキストを縦方向に配置する方法の完全な紹介です。
CSS3 チュートリアルについて詳しく知りたい場合は、以上がCSSを使って文字の縦配置を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。