Div在大屏幕上看起來會從中心移除

我有一段主頁，當在除了我正在使用的屏幕尺寸以外的屏幕尺寸中查看時，它會改變位置。我認爲這與位置元素有關，但我不確定應該在CSS中放置什麼或放置在什麼位置。Div在大屏幕上看起來會從中心移除

我想要保留在同一個地方的部分是一個jQuery圖像轉換，它顯示在圖像中的導航菜單下面。請參閱下面的HTML和CSS以供進一步參考。

感謝您的幫助球員

enter image description here

HTML: 

<body> 
<div id="top_bar"> 
<div id="top_inner"> 
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></a></div> 
<div class="nav"> 
<ul class = "menu" > 
      <li> <a href = "#" > Home </a> </li> 
      <li><a href = "#" > Packages </a> 
      <li><a href = "#" > Weddings </a> 
      <li><a href = "#" id="left" > Lifestyle </a> 
     <ul class = "submenu" > 
      <li> <a href = "#" > Families </a> </li> 
      <li> <a href = "#"> Newborn/Child </a> </li> 
      <li> <a href = "#" > Portraits </a> </li> 
     </ul> 
     </li> 

     <li> <a href = "#" > Blog </a> </li> 
     <li><a href = "#" id="left"> Abous Us </a> 
     <ul class = "submenu" > 
     <li> <a href = "#" > Ed Osborne </a> </li> 
     <li> <a href = "#" > Testimonials </a> </li> 
     <li> <a href = "#" > FAQs </a> </li> 
     </ul> 
     </li> 

     <li> <a href = "#" > Contact Us </a> </li> 
     <li> <a href = "#" > Links </a> </li> 
     </ul> 
    </div> 
</div> 
</div> 

<div id="main"> 

<div id="smart-gallery"> 
    <a href="images/cubagallery-img-1.jpg"> 
     <img src="images/cubagallery-img-1.jpg" /></a> 

    <a href="images/cubagallery-img-15.jpg"> 
     <img src="images/cubagallery-img-15.jpg" /></a> 

    <a href="images/cubagallery-img-3.jpg"> 
     <img src="images/cubagallery-img-3.jpg" /></a> 

    <a href="images/cubagallery-img-4.jpg"></a> 
     <img src="images/cubagallery-img-4.jpg" /></a> 
</div> 

</div>

CSS：

#top_bar { 
width: 100%; 
height: 145px; 
background: #000000; 
padding-bottom: 20px; 
} 

#top_inner { 
text-align: center; 
margin: 0 auto; 
width: 1000px; 
height: 144px; 
} 

.nav { 
margin: 0 auto; 
position: relative; 
padding-top: 100px; 
} 

ul.menu { 
list-style: none; 
margin: 0; 
float: left; 
background: #222; 
font-size: 1.2em; 
background: url(../images/topnav_bg.gif) repeat-x; 
} 

ul.menu li { 
float: left; 
margin: 0; 
position: relative; 
} 

ul.menu li span { 
width: 11px; 
height: 35px; 
float: left; 
background: url(../images/subnav_btn.gif) no-repeat center top; 
} 

.min-gallery 
{ 
width: 927px; 
height: 615px; 
border: solid 1px black; 
background-color: Black; 
background: url(../images/bg.jpg); 
margin: auto; 
margin-left: 232px; 
} 

.min-gallery .preview 
{ 
width: 852px; 
height: 493px; 
margin-top: 36px; 
margin-left: 36px; 
margin-right: 36px; 
position: relative; 
border: solid 2px black; 
overflow: hidden; 
background-color: White; 
} 

.min-gallery .preview img 
{ 
width: 795px;    
height: 525px; 
position: absolute; 
} 

.min-gallery .bottom 
{ 
width: 100%; 
height: 98px; 
color: Gray; 
font-family: Arial; 
font-size: 1em; 
font-weight: bold; 
overflow: hidden; 
}

來源

2012-09-16 user1278496

你可能有一個網址分享？如果沒有看到它，就無法真正看到/發現它。 – cmplieger

抱歉，我忘記了添加圖像。請參閱圖片 – user1278496

儘管如此，JavaScript並未執行，所以我們沒有最終的HTML代碼。沒有真正的幫助。以下是我們可以使用的內容：http://jsfiddle.net/FdpFW/ – cmplieger

你的HTML代碼不包含min-gallery類的元素，...但如果你改變它帶智能畫廊的min-gallery：

.smart-gallery 
{ 
    width: 927px; 
    height: 615px; 
    border: solid 1px black; 
    background-color: Black; 
    background: url(../images/bg.jpg); 
    margin: auto; 
    margin-left: 232px; <- remove 
} 
.smart-gallery...

來源

2012-09-16 13:35:18

我刪除了你說的和它的作品。非常感謝：） – user1278496