なぜマージンを自動調整しないのですか？

93

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

divそれが必要として100％に拡大するが、画像自体を中央にしません。どうして？

html css

— ジョー・フィリップス
ソース

197

あなたの画像がインラインブロック要素だからです。次のように、ブロックレベルの要素に変更できます。

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

中央揃えになります。

— ケルテックス
ソース

10

ブロックレベルとしてレンダリングする必要があります。

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
ソース

なぜ垂直方向ではなく水平方向にしか整列しないのですか？

— Bell氏

4

垂直方向の配置は、期待したほど簡単ではありません。それはすべてCSS仕様にかかっ

— TheDeadMedic

8

追加 style="text-align:center;"

以下のコードを試してください

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

— プラナイラナ
ソース

あなたの答えは間違っているとは思いませんが、あなたの答えは表示タイプの説明が不足しています。

— ジョーフィリップス

あなたの答えは代替ソリューションと見なすことができますが、私はそれをお勧めしません。その理由は、div内に他に何かを追加すると、たとえば、見出しが画像の中央に揃うためです。見出しを左に揃えるには、さらに多くのスタイルを記述する必要があります。divに追加するものすべてに対してこれを実行し続ける必要があります。そのdisplay: block;ため、画像に追加することを強くお勧めします。

— Devner 2014年

2

私はこれが古い記事であることを知っていますが、同じ問題をどのように解決したかを共有したいと思いました。

私の画像は親クラスからfloat：leftを継承していました。float：noneを設定することで、margin：0をautoにし、display：ブロックを適切に機能させることができました。それが将来誰かを助けることを願っています。

— ライアン・ホリングスワース
ソース

1

オブジェクトの特定の幅を定義する必要があります。そうしないと、オブジェクトが中央に配置されません。相対的な幅は機能しません。

— キャットウーマン
ソース

2

これは質問に対する答えを提供しません。批評したり、著者に説明を求めたりするには、投稿の下にコメントを残します。自分の投稿にはいつでもコメントできます。十分な評判を得ると、どの投稿にもコメントできるようになります。

— Kristijan Iliev、2015年

私の要点は、いくつかの人がうまくいく答えを出した一方で、コードがオブジェクトの幅の特定の定義を含んでいる場合にのみうまくいくということでした。例：<img [... etc。、etc。、...] style = "display：block; margin：auto; width：200px" />は機能しますが、「width」のような相対的なサイズは使用しないでください：50％」。もちろん、「width：100％」を使用する場合、オブジェクトの左側または右側にマージンがないため、センタリングは問題になりません。

— キャットウーマン』

0

開いてdiv置く

style="width:100% ; margin:0px auto;"

image タグ（または）コンテンツ

divを閉じる

— ハム・イスラム
ソース

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— サリル
ソース

0

見つかった...マージン：0自動; 私のために働く。しかし、私はまた、クラスが... float：left; したがって、追加が必要になる可能性があることに注意してください... float：none; 私の場合、メディアクエリをコーディングしていたので、これはうまくいきました。

— ディノ
ソース