序文 CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に包括的で詳細です。これらは、参考と学習のために共有されています。以下の詳細な紹介を見てみましょう。
Web デザインで中央揃えを行う場合、最も重要なことは、要素をその親要素の中央に配置することです。単純に聞こえますが、さまざまな可能性を考慮しましたか? シンプル: 幅と高さがわかっている要素 要素の幅と高さの両方がわかっていて、その要素を親に対して垂直方向に中央揃えにしたい場合は、絶対配置を使用すると良いでしょう。
主要{ 位置: 絶対; top: calc(50% - 3em); //親要素の高さの50%と自身の高さの半分だけ上に移動します left: calc(50% - 9em); //親要素の幅の50%と自身の幅の半分だけ左に移動します width: 18em; 高さ: 6em; } 上級: 幅と高さが不明な要素 しかし、ページ上の多くの要素の幅と高さは不明です。
絶対位置に基づいて拡張します。 translate() 関数を使用してパーセンテージ値を計算する場合、変換と移動は要素自体の高さと幅に基づいて行われます。 translate() 関数は、位置の相対的な指定と同様に、要素を指定された方向に移動できます。簡単に言えば、translate() 関数を使用すると、X 軸または Y 軸上の Web コンポーネントに影響を与えることなく、要素を元の位置から移動できます。 したがって、パーセンテージベースの CSS 変換を使用して要素をオフセットする限り、コンパイルされたコードで要素のサイズをハードコードする必要はありません。 主要{ 位置: 絶対; 上位: 50%; 左: 50%; 変換: translate( -50%, -50% ); } 絶対位置指定は適していません 絶対位置指定を使用しない場合は、translate() を使用して要素の幅と高さを半分だけ移動できます。 余白を使用して動きの効果を実現できます。 主要{ 幅: 18em; パディング: 13m 1.5em; margin: 50vh auto 0; //外側の余白はvhを単位として使います。マージンのパーセンテージ値は親要素の幅を基準として解釈されるので、ここではvhが使われます。 変換: translateY( -50% ); } テーブルベースのレイアウト CSS テーブルは良い選択かもしれません。 テーブルは通常のブロックレベル要素のようにレンダリングされないためです。たとえば、要素の幅が 100% の場合、テーブルは実際のコンテンツの幅のみを占有しますが、デフォルトのブロックレベル要素は自動的に親要素の 100% を占有します。 <テーブルスタイル="100%"> <tr> <td スタイル="text-align: center; vertaical-align: center"> 垂直に中央に配置されました! </td> </tr> </テーブル> ページの意味を考慮すると、次のようにすることができます .何か意味のある{ 表示: テーブル; 幅: 100%; } .他の意味 { 表示: テーブルセル; テキスト配置: 中央; 垂直位置合わせ: 中央; } インラインブロック 疑似要素の使用も検討できます。 すると、垂直方向の中央揃え効果が得られます。 これは比較的ハッキーな方法です。 。ブロック { テキスト配置: 中央; 空白: ラップなし; } /* 高さを 100% まで拡張します */ .block:before { コンテンツ: ''; 表示: インラインブロック; 高さ: 100%; 垂直位置合わせ: 中央; margin-right: -0.25em; /* 間隔を調整します */ } /* 垂直方向に中央揃えされる要素の幅と高さは任意です*/ .centered { 表示: インラインブロック; 垂直位置合わせ: 中央; 幅: 300ピクセル; } Flexboxベースのソリューション Flexbox を使用すると、通常、子要素のレイアウトをより適切に操作できます。次に例を示します。
それは間違いなく最善の解決策です。 Flexboxはこのようなニーズに合わせて特別に設計されているからです😄 体{ ディスプレイ: フレックス; 最小高さ: 100vh; マージン: 0; } 主要{ マージン: 自動; } 中央揃えの要素内のテキストも中央揃えにする必要がある場合: 主要{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの中央揃え: 中央; 幅:18em; 高さ: 10em; } 要約する 上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。 参照:
|
この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...
RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...
目次DockerコンテナのエクスポートDockerコンテナのインポートこの記事では主に、コンテナ...
tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...
問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...
IE は開発の初期段階では頭を悩ませましたが、他のブラウザとは異なります。他のブラウザがサポートして...
フィルターとバックドロップフィルターにはいくつかの違いがあります。フィルターは現在の要素だけでなく、...
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...
デフォルトでは、表のタイトルは水平方向に中央揃えされます。ALIGN 属性を使用して、タイトル テキ...
オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...