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

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

今日は、すべてのブラウザ (主に 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 で高性能なインデックスを作成するための完全な手順

推薦する

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

MySQLのinnodb_data_file_pathパラメータを変更する際の注意事項

序文innodb_data_file_path は、innodb テーブルスペース ファイルを指定す...

MySQLの詳細な説明Explain

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...

ティックアニメーション効果を作成するための svg+css または js

以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

JavaScript はクラス宝くじアプレットを実装します

この記事では、クラス抽選アプレットを実装するためのJavaScriptの具体的なコードを参考までに紹...

クロスブラウザの問題に対する 5 つの解決策 (要約)

簡単なレビュー: ブラウザの互換性の問題は、しばしば頭痛の種となります。ここでは、これらの問題を回避...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...

HTMLフォームアプリケーションにはチェックボックスとラジオボタンの使用が含まれます

チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...

Zabbix で監視項目と集約されたグラフを設定するためのサンプルコード

1. ローカルマシンを監視するためにZabbixエージェントをインストールするエージェントソフトウェ...

MySql でリモート接続を許可する方法

MySql でリモート接続を許可する方法この目標を達成するには、2つのことを行う必要がある。ユーザー...

.Net Core を使用して数千万のデータを MySQL にインポートする手順

目次事前準備実施方法: 1. 単一のデータを挿入する2. マージデータ挿入3. MySqlBulkL...

HTMLファイルとは何ですか?HTMLファイルを開く方法

HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...

検証コード干渉を実装する js (動的)

この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...