-1
ウェブプログラミングのクラス（数週間前）で私たちは自分のウェブサイトを作るプロジェクトを始めました。さて、ほとんどのことはうまくいっていますが、私はページを中心にして作業をしませんでした。私はそれがどちらもうまくいかない理由を知らない、私はそれがブロック/カウンターかもしれないコードの何かかもしれないと思っているが、私は知らない。私は基本的に、HTML全体を中心にしたい。私はあなたが見るようにbgcolorタグの後にdivタグに "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;
}
余白の左右の代わりに、 'margin：0 auto;'を試してください。 – Jer