最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約し、ここに載せることにしました。 1. テキストを中央揃えにする コードをコピー コードは次のとおりです。<div class="wrap"> 私は真ん中です... </div> .. height+line-height+text-center (1行のみ中央揃え可能) 。包む{ 幅:px; 高さ:px; border:px 赤一色; テキスト配置: 中央; 行の高さ: px; } ps:text-align:centerは要素の下のインライン要素のみを中央揃えします 1.2display:table-cell (高さを固定した中央揃えの複数行) コードをコピー コードは次のとおりです。。包む{ 幅:px; 高さ:px; border:px 赤一色; テキスト配置: 中央; 表示:テーブルセル; 垂直位置合わせ: 中央; } display:table-cell: は ie67 では動作しません。display:table; と一緒に使用するのが最善です。 ie67 の場合: (もう使用しませんが、ここに置きます) 方法 1: (em タグの高さは親と同じなので、span と em の中央揃えは、親の span の中央揃えと同じです) コードをコピー コードは次のとおりです。<div class="wrap"> <span> 私は真ん中です...私は真ん中です...私は真ん中です... </span> <em> </div> 。包む{ 幅:px; 高さ:px; border:px 赤一色; テキスト配置: 中央; } .wrap span{ 垂直位置合わせ: 中央; 表示:インラインブロック; 幅:px; } .wrap em{ 身長:%; 垂直位置合わせ: 中央; 表示:インラインブロック; } 方法 2: (絶対配置された親タグを子要素に追加し、子要素の相対配置を使用して水平方向と垂直方向に中央揃えする) コードをコピー コードは次のとおりです。<div class="wrap"> <span class="span"> <span class="span">私は真ん中です...私は真ん中です...私は真ん中です...私は真ん中です...</span> </span> </div> 。包む{ 幅:px; 高さ:px; border:px 赤一色; 表示:テーブル; 位置:相対; オーバーフロー: 非表示; } .wrap .span{ 表示:テーブルセル; 垂直位置合わせ: 中央; テキスト配置: 中央; *位置:絶対; トップ:%; 左:%; } .wrap .span{ *位置:相対; トップ:-%; 左:-%; } 1.3パディング(言うまでもなく内部パディング) コードをコピー コードは次のとおりです。。包む{ 幅:px; border:px 赤一色; パディング:px; } 2. 中心となる要素 コードをコピー コードは次のとおりです。<div class="wrap"> <span></span> </div> 2.1position:absolute+margin負の値(マージンを計算するには幅と高さが必要です) コードをコピー コードは次のとおりです。。包む{ 幅:px; 高さ:px; 位置:絶対; トップ:%; 左:%; 上マージン:-px; 左マージン:-px; border:px 赤一色; } .wrap span{ 幅:px; 高さ:px; 背景:赤; 位置: 絶対; トップ:%; 左:%; 上マージン:-px; 左マージン:-px; } ps: CSSはDIVの水平中央揃えと垂直中央揃えを実現します コードをコピー コードは次のとおりです。<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8" /> <title>垂直センタリングオンラインデモ DIVCSS5</title> <スタイル> #主要 { 位置: 絶対; 幅:400ピクセル; 高さ:200px; 残り:50%; 上位:50%; 左マージン:-200px; 上マージン:-100px; 境界線:1px 実線 #00F } /*cssコメント: スクリーンショットの便宜上、CSSコードを囲みます*/ </スタイル> </head> <本文> <div id="main">DIV 水平中央と垂直中央<a href="http://www.divcss5.com/">DIVCSS5</a></div> </本文> </html> 水平および垂直の中央揃えの原則の紹介<br />ここでは絶対位置の position:absolute を使用し、left と top を使用して、オブジェクトの上端と左端からの距離を 50% に設定します。ただし、50% に設定すると、ボックスは実際には中央に配置されないため、margin-left:-200px;margin-top:-100px; を設定します。ここでトリックがあります。margin-left の値は幅の半分であり、margin-top の値もオブジェクトの高さの半分です。同時に、それらを負に設定することで、水平および垂直の中央揃えが実現されます。 |
<<: Redis イメージの Docker インストールと設定手順
>>: JavaScript 配列の重複排除とフラット化関数の紹介
最近、MySQL関連の構文をよく見かけます。また、MySQLストアドプロシージャの書き方も学びたいの...
目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...
1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...
仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...
この記事の例では、Vueスライダー検証の実装を共有しています。コードは次のとおりです。 <テン...
これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...
数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアは...
1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...
1. ネクサスサービス構築の意義イントラネットの統合プロキシとして、チームで共同開発する場合、全員が...
目次1. コンテンツの概要2. 文字セットと文字順序の概念と関係3. MySQL でサポートされてい...
まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...
目次背景提供/注入共有状態の抽出データを提供するデータの挿入まとめ反応的な共有状態の抽出共有状態の使...
dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...
目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...
01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...