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配列の重複排除のいくつかの方法についての詳細な説明

推薦する

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる

目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...

CentOS に Nginx をインストールする方法

公式ドキュメント: https://nginx.org/en/linux_packages.html...

アダプティブ Web デザインの手法 (モバイル フォンでの優れたアクセス エクスペリエンス)

1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...

Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...

VMware での Ubuntu Docker のインストール (コンテナ構築)

1. マインドマップ 2. コンテナの構築方法2.1 実験環境の準備(1)環境選択管理ツール: D...

CocosCreator でレイヤー管理に常駐ノードを使用する方法

CocosCreator バージョン: 2.3.4ほとんどのゲームにはレイヤー管理機能があり、例えば...

autoconfを使用してMakefileを生成し、プロジェクトをコンパイルする手順

序文Linux では、コンパイルとリンクには Makefile を使用する必要がありますが、適切な ...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

Dockerコマンドは一般ユーザーが実行できるように実装されている

dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...

JavaScript のクロージャの詳細な説明

導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...