CSS3を使用してテキストの垂直配置を実現する方法

CSS3を使用してテキストの垂直配置を実現する方法

最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパティを使用しました。

Writing-mode は元々 IE でサポートされていたプロパティでしたが、後にこの新しいプロパティが CSS3 に追加されたため、IE と他のブラウザの構文は異なります。

1.0 CSS3 標準

writing-mode:horizo​​ntal-tb; //デフォルト: 水平方向、上から下 writing-mode:vertical-rl; //垂直方向、右から左 writing-mode:vertical-lr; //垂直方向、左から右

デモ

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>CSS テキストの垂直配置</title>
        <スタイル タイプ="text/css">
            div{
                境界線: 1px 実線の水色;
                パディング: 5px;
            }
            .縦書きテキスト{
                -webkit-writing-mode: 垂直方向;
                書き込みモード: 垂直方向;
            }
        </スタイル>
    </head>
    <本文>
        <div class="vertical-text">
            1. テキストは縦に並べられています<br />
            2. テキストは縦に並べます</div>
    </本文>
</html> 

2.0 インターネットエクスプローラ

歴史的な理由により、IE におけるこのプロパティの値は特に複雑です。

-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb

詳細については、公式ドキュメントを参照してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/ライティングモード/

3.0 いくつかのアプリケーション

3.1 垂直方向の中央揃え

このプロパティを使用すると、text-align:center と組み合わせて垂直方向の中央揃えを実現したり、margin: auto を使用したりできます。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>CSS3 画像の垂直中央</title>
        <スタイル タイプ="text/css">
            div{
                境界線: 1px 実線の水色;
                パディング: 5px;
                高さ: 500px;
            }
            .垂直画像{
                -webkit-writing-mode: 垂直方向;
                -ms-書き込みモード: bt-rl;
                書き込みモード: 垂直方向;
                テキスト配置: 中央;
            }
        </スタイル>
    </head>
    <本文>
        <div class="vertical-img">
             <画像 src="1.jpg"/>
        </div>
    </本文>
</html> 

3.2 テキスト沈み込み効果

テキストの writing-mode を設定し、それを text-indent と組み合わせて、テキストがクリックされたときに沈む効果を実現できます。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>テキスト沈み込み効果</title>
        <スタイル タイプ="text/css">
            .btn{
                幅: 50px;
                高さ: 50px;
                行の高さ: 50px;
                色: 白;
                テキスト配置: 中央;
                フォントサイズ: 16px;;
                表示: インラインブロック;
                境界線の半径: 50%;
                背景: グレー;
                カーソル: ポインタ;
            }
            .btn:アクティブ{
                テキストインデント: 2px;
            }
            .縦書きテキスト{
                 書き込みモード: tb-rl;
                -webkit-writing-mode: 垂直方向;      
                書き込みモード: 垂直方向;
                *書込みモード: tb-rl;
            }
        </スタイル>
    </head>
    <本文>
        <span>赤い封筒を受け取るにはクリックしてください</span>
        <p class="vertical-text btn">開く</p>
    </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Docker Compose ワンクリック ELK デプロイ方式の実装

>>:  JavaScript配列の重複排除のいくつかの方法についての詳細な説明

推薦する

CSSは下部のタップバー機能を実装します

現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...

docker runの--rmオプションの使用方法

Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

中国における中国語ドメイン名の人気は新たなクライマックスを迎えた

<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...

システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル

1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...

HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...

MySQL の大文字と小文字の区別に関する注意

目次MySQLの大文字と小文字の区別はパラメータによって制御されますMySQLの大文字と小文字の区別...

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...

MySQLの指定順序ソートクエリについての簡単な説明

最近、空港や駅でフライト情報を表示するものと似た大型スクリーンディスプレイのプロジェクトに取り組んで...

Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析

1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

Nginx 500 内部サーバーエラーの解決方法

今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...

MySQL で複数のフィールドを連結する詳細な例

MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...

入力テキストボックスの入力実装プロパティを無効にする

今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...

デザイン理論:人の心を理解する方法

<br />かつて、仏印と東坡氏が仏教について雑談していたとき、東坡氏が突然こう言った。...