divが中心に置かれていないのはなぜですか？

私はそのようなコードhttps://jsfiddle.net/96Lnxr38/3/を持っていますが、あなたが見ることができます - クラスd1のdivは正しく整列していません。 <div class="d1"></div>要素の間にスペースを追加すると、整列がうまく動作します。それはブラウザのバグですか、私の間違いでしょうか？私はFFがうまく動作し、Chome/Safariが私にこのバグを示していることがわかりました。divが中心に置かれていないのはなぜですか？

出典

2017-04-01 Egor Baranov

ピクセル幅を使用している場合、最も良い解決策はmargin：autoです。

.cont { 
    text-align: center; 
    width: 500px; 
    margin:auto; 
} 

.d1 { 
    width: 300px; 
    height: 500px; 
    margin-top: 10px; 
    background-color: red; 
    display: inline-block; 
    margin:auto; 
}

このリンクをたどる：https://jsfiddle.net/96Lnxr38/6/

出典

2017-04-01 07:56:44

問題は、あなたのインラインブロックのdivの間に空白です。これらの空白文字はフローにも参加し、インラインまたはインラインブロック要素間のスペースを占有します。

はあなたdiv.d1要素の間に単に削除した空間をお試しください：

.cont { 
 
     text-align: center; 
 
     width: 500px; 
 
     word-spacing: 80px; 
 
    } 
 

 
    .d1 { 
 
     width: 300px; 
 
     height: 500px; 
 
     margin-top: 10px; 
 
     background-color: red; 
 
     display: inline-block; 
 
    }

<body> 
 
    <div class="cont"> 
 
    <!-- Note no whitespace between divs --> 
 
    <div class="d1"></div><div class="d1"></div><div class="d1"></div> 
 
    </div> 
 
</body>

別のオプションは、あなたの.d1スタイルでblockからdisplayを変更することです。

出典

2017-04-01 08:07:14

ありがとうございましたが、2つの問題があります。ワイドスクリーン用に同じ行に3つの要素をすべて入れたいので、 'display'を' block'に変更できません（例では示されていません）この場合、同じ行にあるときにd1 divの間に80ピクセルのスペースがないため、空白を削除できません。 –

ポイントを得ました。単語の間隔の代わりにマージンを使用できます。 .d1の左余白と右余白を40ピクセルに設定してみてください –

divが中心に置かれていないのはなぜですか？

答えて

関連する問題