Question

因此，在网络编程课程（几周前），我们开始了一个项目来创建我们自己的网站。现在，大多数事情都很顺利，虽然我试图将我的页面放在中心但它没有用。我也不知道为什么它也不起作用，我认为它可能是代码中可能会阻止/抵制它的东西，但我不知道。我基本上希望整个html居中。我使用了一个名为＆＃34; wrap＆＃34;在你看到的bgcolor标签之后的div标签上。

HTML：

map(lambda sv: sv.get(), row['new'].values())
                   # ^ this time we're calling it inside the lambda

CSS：

<!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>

Answer 1

在CSS代码中尝试justify-content: center

Answer 2

您的#wrap div正在以网站为中心。但是，对于小于800px的分辨率，您会看到它水平溢出。

您可能认为它没有居中，因为您的img标记的内联样式为width: 1400px，这使得它超出了实际的容器div。

这里删除了该标记的小提示（尽量不要在HTML上使用内联样式以正确分离关注点，如css文件中的CSS和html文件中的HTML）。 https://jsfiddle.net/dm3bmpas/

我还为width: 800px和max-width: 800px替换了width: 100%，因此您的容器在分辨率足够大的情况下最多需要800px，但对于较小的分辨率，它需要所有可用的宽度;这是一种常见的响应模式。

最后，以防万一，如果您希望文本在div中居中，那么您在#wrap div上查看的规则为text-align: center。

Answer 3

试试这个css

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

Answer 4

就像@ Juan-Ferres这里有JSFiddle可能对你有所帮助。另一个很好的资源是Bootstrap，并在他们的示例中查看类容器。正如一些人指出的那样，关键是margin: 0 auto或类似margin: 10px 10px 10px 10px之类的东西，但是你需要更加严格的宽度。

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

4 个答案: