最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパティを使用しました。 Writing-mode は元々 IE でサポートされていたプロパティでしたが、後にこの新しいプロパティが CSS3 に追加されたため、IE と他のブラウザの構文は異なります。 1.0 CSS3 標準 writing-mode:horizontal-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配列の重複排除のいくつかの方法についての詳細な説明
1. ユーザーを作成します。注文: 'password' によって識別される ...
目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...
公式ドキュメント: https://nginx.org/en/linux_packages.html...
1. HTML ヘッダーにビューポート タグを追加します。ウェブサイトの HTML ファイルの先頭...
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...
フロントエンドテストページコード: <テンプレート> <div> <i...
目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...
1. マインドマップ 2. コンテナの構築方法2.1 実験環境の準備(1)環境選択管理ツール: D...
CocosCreator バージョン: 2.3.4ほとんどのゲームにはレイヤー管理機能があり、例えば...
序文Linux では、コンパイルとリンクには Makefile を使用する必要がありますが、適切な ...
html <div> 要素 <button type="button&q...
目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...
dockerをインストールすると、通常はdockerユーザーグループが作成されます。ステップ2: 現...
導入クロージャは JavaScript の非常に強力な機能です。いわゆるクロージャは関数内の関数です...
MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...