不知道爲什麼我不能中心網頁

-1

所以，在網絡編程類（幾個星期前），我們開始了一個項目，使自己的網站。現在，大多數事情都很順利，儘管我試圖將我的頁面放在中心位置，但它沒有奏效。我不知道它爲什麼也行不通，我認爲這可能是代碼中的某些東西可能會阻止/反制它，但我不知道。我基本上希望整個HTML中心。我會在bgcolor標籤後面使用一個名爲「wrap」的ID，如您所見。不知道爲什麼我不能中心網頁

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Norskandi</title> 
<link rel="stylesheet" type="text/css" href="css/norskandi.css"> 
<style type="text/css"> 
</style> 
</head> 
<body bgcolor="#4A96AD"> 
<div id="wrap"> 
<a href="index.html"><IMG STYLE="WIDTH:1400px; HEIGHT:80px" src="../bilder/3_11.png"></a> 


    <a href="#">Contact</a> 
    <a href="#">About</a> 
<script type="text/javascript"> 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
/*window.onclick = function(event) { 
if (!event.target.matches('.dropbtn')) { 

var dropdowns = document.getElementsByClassName("dropdown-content"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
var openDropdown = dropdowns[i]; 
if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
    } 
} 
}*/ 
function geography() { 
document.getElementById("geography").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
/*window.onclick = function(event) { 
if (!event.target.matches('.dropbtn')) { 

var dropdowns = document.getElementsByClassName("dropdown-content1"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
var openDropdown = dropdowns[i]; 
if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
    } 
} 
}*/ 
function anthems() { 
document.getElementById("anthems").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
/*window.onclick = function(event) { 
if (!event.target.matches('.dropbtn')) { 

var dropdowns = document.getElementsByClassName("dropdown-content2"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
var openDropdown = dropdowns[i]; 
if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
    } 
} 
}*/ 
</script> 
    <div class="dropdown"> 
     <button onmouseover="myFunction()" class="dropbtn">History</button> 
     <div id="myDropdown" class="dropdown-content"> 
     <a href="historysweden.html">Sweden</a> 
     <a href="historynorway.html">Norway</a> 
     <a href="historydenmark.html">Denmark</a> 
     </div> 
    </div> 

    <div class="dropdown1"> 
     <button onmouseover="geography()" class="dropbtn">Geography</button> 
     <div id="geography" class="dropdown-content1"> 
     <a href="geographysweden.html">Sweden</a> 
     <a href="geographynorway.html">Norway</a> 
     <a href="geographydenmark.html">Denmark</a> 
     </div> 
    </div> 

    <div class="dropdown2"> 
     <button onmouseover="anthems()" class="dropbtn">Anthems</button> 
     <div id="anthems" class="dropdown-content2"> 
     <a href="anthemssweden.html">Sweden</a> 
     <a href="anthemsnorway.html">Norway</a> 
     <a href="anthemsdenmark.html">Denmark</a> 
     </div> 
    </div> 
    </div> 
    </body> 
    </html>

CSS：

#wrap{ 
width: 800px; 
margin-right: auto; 
margin-left: auto; 
height: auto; 
}

來源

2017-04-19 NordicLion

代替左右邊距，請嘗試'margin：0 auto;' – Jer

像@胡Ferres這裏是一個JSFiddle，可以幫助你。另一個很好的資源是Bootstrap並在他們的示例中查看類容器。正如一些人指出，雖然關鍵是margin: 0 auto或類似margin: 10px 10px 10px 10px但你需要更嚴格的寬度。

來源

2017-04-19 09:50:10 K7Buoy

嘗試justify-content: center在你的CSS代碼

來源

2017-04-19 09:14:53

你#wrap格正在中心的網站上。但是，對於小於800像素的分辨率，您會看到它水平溢出。

由於img標籤的內聯風格爲width: 1400px，您可能會認爲它不是居中，這使得它的擴展超出了實際的容器格。

這是一個標籤被刪除的小提琴（儘量不要在你的HTML中使用內聯樣式來正確分隔，在css文件中使用CSS，在HTML文件中使用HTML）。 https://jsfiddle.net/dm3bmpas/

我也更換爲width: 800px和max-width: 800px所以width: 100%你的容器需要多達800像素的決議足夠大但對於較小的分辨率需要所有可用的寬度;這是一種常見的響應模式。

最後，爲了以防萬一，如果你想讓你的文本在div內居中，你在#wrap div上看到的規則是text-align: center。

來源

2017-04-19 09:19:45

試試這個CSS

#wrap{ 
    width: 800px; 
    margin:0px auto; 
}

來源

2017-04-19 09:34:24

不知道爲什麼我不能中心網頁

回答

相關問題