css - 小型モニターの場合のポジショニングの問題

Question

この設定では、画像ギャラリーは27インチのモニターでは正常に見え、体の中央にあります。それでも、15インチのモニターで見ると、数インチ右にあります。今、私はそれが「ギャラリー」cssと関係があることを知っています。なぜならdivがそれを右に押すかもしれないからです。私の質問は、モニターの幅が変化しても静的に保つためのより有益な方法はありますか？2列のレイアウトの見通しについて、以前の位置に移動しないことを見て、少し混乱しました。

<div id="gallery">
<div class="html5gallery" data-width="400" data-height="225" style="display:none>
<img src="images/mr.magic.jpg" alt="Mr. and Mrs. Magic">
<img src="images/mr-magic-2.jpg" alt="Mr. and Mrs. Magic">
<img src="images/mr-magic-3.jpg" alt="Mr. and Mrs. Magic">
<img src="images/mr-magic-4.jpg" alt="Mr. and Mrs. Magic">
<img src="images/mr-magic-5.jpg" alt="Mr. and Mrs. Magic">
<img src="images/david.jpg" alt="Mr. and Mrs. Magic with David Copperfield">
<img src="images/david-2.jpg" alt="Mr. Magic with David Copperfield">
<img src="images/seigfried.jpg" alt="Mr. Magic with Seigfried and Roy">
</div>
</div>

#gallery {
position: relative;
left: 950px; 
top: -560px;
float: left; padding:0; margin:0 
}

皆さんがこれらの問題を検討するのに時間を割いてくれたことに感謝し、良い答えを期待することしかできません。お時間を割いていただきありがとうございます。

Answer 1

私はCSSが得意ではありませんが...

left：950pxは、divが常に親divの左側（おそらくあなたの場合は画面）から950pxになることを意味します。そのため、小さい画面では、さらに右側に表示されます。

代わりに、％またはpxを使用してdivの幅を設定してから、左右の余白をautoに設定してみてください。何かのようなもの：

#gallery {
position:relative;
width:50%;
margin: 0 auto;
top:-560px;
}