CSS は、Elements_html/css_WEB-ITnose の垂直方向の中央揃えを実装します。
CSS は要素の垂直方向の中央揃えを実装します
要素の垂直方向の中央揃えについては、単行要素と複数行要素の場合に応じて説明します。
1. 親要素の高さが決定された単一行テキスト
親要素の高さが決定された単一行テキストの垂直方向の中央揃え方法は、親要素の高さと行の高さを設定することで実現されます。一貫している。
HTML 構造:
<div class="container"> Hello World!!!</div>
CSS スタイル:
<style> .container{ height:100px; line-height:100px; background:#999; }</style>2. 親要素の高さが不明な複数行テキスト
親要素の高さが不明なテキストや画像などのブロックレベルの要素の垂直方向の中央揃えについても、同様です上下を設定できます。パディング値によってセンタリングを実現できます。この値はあまり大きくする必要はありません。3. 親要素の特定の高さを持つ複数行のテキスト
複数行のテキスト、画像、およびブロックレベルの要素はすべて、垂直方向の中央揃えには 2 つの主な方法があります。
1. tableの挿入
縦方向中央に配置する要素の外側にtable（tbody、tr、tdを含む）タグを挿入し、vertical-align: middleを設定します。
CSS には垂直方向の中央揃え用のプロパティvertical-align がありますが、このスタイルは親要素が td または th の場合にのみ有効であることにも注意してください。
HTML 構造:
<body> <table> <tbody> <tr> <td class="wrap"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div> </td> </tr> </tbody> </table></body>
table td{height:500px;background:#ccc}2. ブロックレベルの要素の表示をテーブルセルに設定する
ブラウザ Chrome、Firefox、IE8 以降では、ブロックレベルの要素の表示をテーブルセルに設定し、vertical-align 属性をアクティブにすることができます。ただし、IE6 および 7 には注意してください。このスタイルはサポートされていません。
HTML 構造:
<div class="container"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div></div>
<style> .container{ height:300px; background:#ccc; display:table-cell; vertical-align:middle; }</style>この方法の利点は、冗長な意味のないタグを追加する必要がないことですが、欠点も明らかであり、互換性はあまり良くなく、IE6 とは互換性がありません。と7。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7478
15
1377
52
77
11
19
33
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
