不知道为什么我不能中心网页

-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

不知道为什么我不能中心网页

回答

相关问题