HTML の水平および垂直中央揃えの問題の概要

HTML の水平および垂直中央揃えの問題の概要

最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約し、ここに載せることにしました。

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はクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

5つのクールで実用的なHTMLタグと属性の紹介

実はこれもクリックベイトのタイトルであり、「派手」とは言えません。ただ私が無知で、こうしたラベルを見...

Explainキーワードに基づいてMySQLインデックス機能を最適化する方法

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

MySQL データベースのインストールと Navicat for MySQL の使用に関するチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様コンポーネントベースの開発という考え方は、私の開...

MySQLテーブルのテーブル構造を素早く変更する方法

MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...

docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...

ESXI の仮想マシンにワークステーションをインストールするときに発生するネットワーク障害の解決策

問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...

Reactでレシピシステムを実装する方法を解説した記事

目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...

JS 実用的なオブジェクト指向スネークゲームの例

目次考える1. 貪欲な蛇の効果画像2. スネークの分析2.1 ゲーム開始機能2.2 運動機能2.2....

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...