最近のプロジェクトでは、テキストを垂直に揃えたいと考え、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配列の重複排除のいくつかの方法についての詳細な説明
現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...
Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...
目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...
<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...
1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...
テクノロジーの活用itext.jar: バイト ファイル入力ストリームを画像、PDF などに変換しま...
目次MySQLの大文字と小文字の区別はパラメータによって制御されますMySQLの大文字と小文字の区別...
目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...
最近、空港や駅でフライト情報を表示するものと似た大型スクリーンディスプレイのプロジェクトに取り組んで...
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...
今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...
MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...
今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...
<br />かつて、仏印と東坡氏が仏教について雑談していたとき、東坡氏が突然こう言った。...