解像度による位置の変更

Question

現在のモックアップUIは、Firefoxでは（予想通り）動作します。

私は画面の解像度に応じて異なる位置に配置された白い枠線を持っています。

は800×600と1024×768で、境界が左に少し整列：1280×1024で

---

、それが表示されます私が望むように、中心に置いた：

HTMLスニペットは次のとおりです。

<div id="comment_middle"> 
     <a id="topcomment"></a> 
     <div id="comment_top"><center><p id="commentshdr">عدد الردود: 0</p></center></div> 
      <div id="commentcontent"> 
       <div id="no_comments"><center><b><font color="purple" size="4">لاتوجد ردود</font></b></center></div> 
       </div> 


     <a id="posted"></a> 
      <div id="maincmnt"> 
       <p>الــرد على الموضوع</p> 
       <fieldset> 
       <form action="po.php?id=499#posted" method="POST"> 
        <!--<input type="hidden" name="posted" value="#posted" />--> 
        <input name="id" value="499" type="hidden"> 
        <input name="page" value="1" type="hidden"> 
        <textarea rows="20" cols="60"></textarea><br> 
        <div id="replybutton_content"> 
         <div id="userbadge-register"><center><a href="#" target="_blank">سجل في الموقع الآن لتستطيع التواصل مع العضو</a></center></div> 
        </div>    </form> 
       </fieldset> 
      </div> 

     <div id="comment_bottom"></div> 
    </div> 

ボーダーはいくつかにスライスされているので、私は上記のすべてのdivを一度にセット全体を動かすことができるように収集div要素を同封私は余裕右のように、異なるサイズを変更

<div style="margin-right: 20%;"> 
//the above html block 
</div> 

：部品は、ので、私はそれらを収集するためのdivのいくつかの並べ替えが必要になります。 20％、パディング - 右などがあります。画面の解像度には常に余分なアライメントがあります。たとえば、境界線が1280 x 1024の中央にある場合、より小さい解像度の境界線は左に揃えられます。境界線がより小さい解像度の中心にある場合、境界線は1280 x 1024で右に揃えられます。すべてがスナップショット＃3の同じ位置に表示されるようにします。どのように問題を解決するための任意のアイデア？

ありがとうございました。

Answer 1

は

<div id="comment_middle" style="margin: 0 auto;"> 

のdiv＃のcomment_middleでこれを試してみて、それの親の余白を削除します。

Answer 2

コンテンツエリア全体に対して外側のラッパーが必要です。それを固定します（960と仮定します）：

.wrapper { 
    width:960px; 
    margin-left:auto; 
    margin-right:auto; 
}