フレックスとポジションの互換性の詳細な説明マイニングノート

フレックスとポジションの互換性の詳細な説明マイニングノート

今日は、すべてのブラウザ (主に IE 9 以上と Chrome) と互換性のある自分のホームページ用の Web サイトを書く時間ができました。以前、非常によくある問題がありました。私はそれに遭遇したので、記録しておこうと思います。質問を直接見てみましょう

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>ドキュメントのタイトル</title>
</head>
<本文>
	<div class="aaa">
      <div>
        
      </div>
  </div>
</本文>
</html>
<スタイル>
.aaa{
 	 幅:700ピクセル;
 	 高さ:500px;
 	 位置:絶対;
	 背景色:赤;
  	 ディスプレイ: フレックス;
  	 アイテムの位置を中央揃えにします。
}
.aaa div{
  	高さ: 200px;
  	幅:200px;
  	位置: 絶対;
 	背景色:黄色;		
}
</スタイル>

前提条件:サブ要素は水平方向に中央揃えする必要がありますが、垂直方向にはposition:absoluteが必要です。 position:relativeまたは其他指定が必要な場合は、 ieでもchromeでも同じで、子元素width中點基点として使用されます。

IE の場合: 親コンテナーのプロパティdisplay: flex;align-items: center;は水平方向に中央揃えされますが、基点は下の図に示すように左上角なります。水平方向に中央揃えにしたい場合は、 transform:translateX(-50%)を追加する必要があります。これは、左移動自身width的50%ことを意味します。利点は、要素の幅を知っているかどうかは関係ないことです。

Chrome: 親コンテナ内のプロパティ: display: flex;align-items: center;子要素を水平方向に中央揃えします。基点は、 ie中的左上角ではなく、子元素width的中點なります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  コードの互換性を高めるために、HTMLを次のように記述します。

>>:  MySQL で高性能なインデックスを作成するための完全な手順

推薦する

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例

Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...

MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)

この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...

CSSコンテンツ属性の具体的な使用法

コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...

MySQL 派生テーブル(Derived Table)の簡単な使用例分析

この記事では、例を使用して、MySQL 派生テーブルの簡単な使用方法を説明します。ご参考までに、詳細...

el-tree での不完全なテキスト表示の解決策

目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...

JS 内の Json 文字列 + Cookie + ローカルストレージ

目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

MySQL トランザクション、分離レベル、ロックの使用例の分析

この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

nginx で同時接続リクエストの数を制限する方法

導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...

docker-compsoe を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法

事前に言っておくDocker を使用すると非常にシンプルなデプロイメント環境を実現できることは誰もが...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

MySQL sql_mode の使用に関する詳細な説明

目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...