私はそのようなコードhttps://jsfiddle.net/96Lnxr38/3/を持っていますが、あなたが見ることができます - クラスd1のdivは正しく整列していません。 <div class="d1"></div>要素の間にスペースを追加すると、整列がうまく動作します。それはブラウザのバグですか、私の間違いでしょうか？私はFFがうまく動作し、Chome/Safariが私にこのバグを示していることがわかりました。divが中心に置かれていないのはなぜですか？
ピクセル幅を使用している場合、最も良い解決策は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/
問題は、あなたのインラインブロックの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を変更することです。
ありがとうございましたが、2つの問題があります。ワイドスクリーン用に同じ行に3つの要素をすべて入れたいので、 'display'を' block'に変更できません（例では示されていません）この場合、同じ行にあるときにd1 divの間に80ピクセルのスペースがないため、空白を削除できません。 –
ポイントを得ました。単語の間隔の代わりにマージンを使用できます。 .d1の左余白と右余白を40ピクセルに設定してみてください –