最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約し、ここに載せることにしました。 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 配列の重複排除とフラット化関数の紹介
この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...
実はこれもクリックベイトのタイトルであり、「派手」とは言えません。ただ私が無知で、こうしたラベルを見...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...
WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...
MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...
目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...
問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...
目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...
目次考える1. 貪欲な蛇の効果画像2. スネークの分析2.1 ゲーム開始機能2.2 運動機能2.2....
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...
Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...