[解決済み] margin-left:auto margin-right: autoでCSSの絶対位置が効かなくなる。
2023-03-16 16:06:27
質問
divタグに以下のようなCSSが適用されているとします。
.divtagABS {
position: absolute;
margin-left: auto;
margin-right: auto;
}
その
margin-left
と
margin-right
は有効になりません。
が、relativeであれば問題なく動作します すなわち
.divtagREL {
position: relative;
margin-left: auto;
margin-right: auto;
}
なぜでしょう?私はただ要素を中央に配置したいだけです。
絶対位置でマージンをautoに設定してもうまくいかないのはなぜか、誰か説明してください。
どのように解決するのですか?
EDIT : この回答は、絶対位置指定された要素をセンタリングすることはできないと主張していました。
margin: auto;
で絶対位置指定された要素を中央に配置することはできないと主張していましたが、これは単に真実ではありません。これは最も多く投票され、受け入れられている答えなので、私は正しいものに変更することを決めました。
ある要素に以下のCSSを適用した場合
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
そして、200pxや40%など、固定の幅と高さを与える、要素 は が中央に配置されます。
ここで フィドル で、その効果を実証しています。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] HTML IFステートメント
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] CSS Flexboxで、"justify-items "と "justify-self "プロパティはなぜないのですか?
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み】CSSで子DIVの幅を親DIVより広くする方法はありますか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
-
[解決済み】「margin: 0 auto;」を動作させるためには、具体的に何が必要ですか?
-
[解決済み] 絶対位置・オーバーフロー非表示
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 横型リストアイテム
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)