CSSでテキストを水平方向に配置する方法

CSSで文字の横配置を実現する方法は、まずHTMLのサンプルファイルを作成し、次にpタグを作成し、最後に「writing-mode:horizo​​ntal-tb;」属性を使用して文字の横配置を実現します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSSでテキストの横配置を実現するにはどうすればよいですか?

#テキストの水平/垂直配置を実現する CSS

writing-mode

: 書き込みモード

属性値horizo​​ntal-tb##vertical-rl右から左への垂直方向の配置vertical-lr左から右に垂直に配置します例:

効果
水平方向の配置

html ：

#

<p class="textBox">
    <h1 id="horizontal-tb-横向排列">horizontal-tb：横向排列</h1>
    <h1 id="vertical-rl-纵向排列-从右到左">vertical-rl：纵向排列，从右到左</h1>
    <h1 id="vertical-lr-纵向排列-从左到右">vertical-lr：纵向排列，从左到右</h1></p>

#css：

#

    <style>
        .textBox h1{
            width: 200px;
            height: 200px;
            margin: 10px 10px;
            padding: 10px;
            float: left;
        }
        .textBox h1:nth-of-type(1){
            writing-mode: horizontal-tb;
            background-color: #42b983;
        }
        .textBox h1:nth-of-type(2){
            writing-mode: vertical-rl;
            background-color: #42a8b9;
        }
        .textBox h1:nth-of-type(3){
            writing-mode: vertical-lr;
            background-color: #81b9aa;
        }
    </style>

#達成効果：

推奨される学習: 「css ビデオ チュートリアル 」

以上がCSSでテキストを水平方向に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。