跨瀏覽器集中圖像和滑塊

現在，我的軌道滑塊工作幾乎完美，我發現了一個新問題。我使用的MacBook Pro 13英寸與鉻作爲主要瀏覽器。一切看起來都很好。然而，我做了一個瀏覽器測試（在衆所周知的網站上），它顯示了我在多個瀏覽器上滑動頁面或頁面並不像它應該做的那樣居中。跨瀏覽器集中圖像和滑塊

現在我的問題，有人可以幫我解決這個問題嗎？所以我的頁面和滑塊都居中。我正在使用由單個圖像組成的網頁，因爲這只是一個小測試。但爲了完成測試，它應該居中。

link to the site

CSS來定位身體和內容（內容包含圖片）

body 
{ 
background-image: url("../afbeeldingen/bg.jpeg"); 
margin-left: auto; 
margin-right: auto; 
text-align:center; /*For IE6 Shenanigans*/ 
} 

#content 
{ 
width: 100%; 
}

和滑塊

#featured 
{ 
position: absolute; 
top: 152px; 
left: 218px; 
}

在此先感謝

來源

2012-10-17 jochemke

請提供一些或最少量的標記和CSS來展示問題，那麼我們可能會更容易爲您提供幫助。 – amn

@amn編輯並插入用於定位元素的CSS。 – jochemke

請不要爲「BODY」元素設置一個固定的寬度或高度，它會導致某些客戶端上的醜陋白色邊框... – feeela

首先，從身體上移除寬度和高度。
你的軌道滑塊使用絕對位置，這意味着它會找到父母的相對位置，這是你的身體。因此，讓我們改變你的內容的div到：

#content { 
position: relative; 
margin: 0 auto; 
width: 1030px; 
}

您也可以刪除該整行：

#featured 
{ 
position: absolute; 
top: 152px; 
left: 218px; 
}

看到如何繼續現在。

來源

2012-10-17 10:30:14 Jonathan

您正在使用絕對定位中心div，而這不是要走的路。這隻針對您的屏幕分辨率進行設置！如果要將其居中，請使用width: 850px; margin: 0 auto;

來源

2012-10-17 10:26:50 Andy

因此，基本上我和圖像一樣，並且它們會在相同的位置什麼尺寸？ – jochemke

您可以指定一個寬度，然後指定任何元素的'margin：auto;'並且它將在它的PARENT元素中間。這意味着將它居中在屏幕上，父母必須與屏幕一樣寬 – Andy

跨瀏覽器集中圖像和滑塊

回答

相關問題