Im building a website with a menu, and as content for the home page, i have an h1(id: titleh1), but it does not center.(i need the h1 to be centered horizontally) can anyone help me? This is my code:
please run the snippet in full page, otherwise it does not work
<!DOCTYPE html>
<html lang="nl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/puntspam/css/style.css">
<title>YebbuSpam Beta</title>
<link rel="shortcut icon" href="//webtinq.nl/puntspam/afbeeldingen/YebbuSpam.png">
</head>
<body>
<div id="menu" style="float: left;">
<button onClick="start()">krijg 30 punten</button><br>
<button onClick="start1()">krijg 60 punten</button><br>
<button onClick="start2()">krijg 90 punten</button><Br>
<a href="https://webtinq.nl/yebbuspam/beta.html" download><button>Download YebbuSpam</button></a><br>
<a id="url" target="_blank" href="https://rewards.microsoft.com/"><button>Microsoft Rewards ➞</button></a><br>
<a id="url" href="https://webtinq.nl/yebbuspam/index.html"><button>YebbuSpam Release ➞</button></a><br>
</div>
<button id="menubutton" onClick="menu()">☰</button>
<h1 id="titleh1">YEBBUSPAM BETA</h1>
<script>
document.getElementById('menu').style.display = "none";
function menu(){
if(document.getElementById('menu').style.display == "none"){
document.getElementById('menu').style.display = "block";
document.getElementById('menubutton').style.left = "200px";
}else{
document.getElementById('menu').style.display = "none";
document.getElementById('menubutton').style.left = "0";
}
}
function start(){
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
}
function start1(){
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
}
function start2(){
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
window.open("https://www.bing.com/search?q=" + Math.floor(Math.random()*90000) + 10000, "_blank");
}
</script>
<style>
body{
height: 100%;
margin: 0 0 0 0;
position: fixed;
}
#url{
bottom: 0;
}
#menu{
display: none;
top: 0;
bottom: 0;
left: 0;
background-color: #2c2d2e;
height: 100%;
z-index: 98;
position: absolute;
}
#titleh1{
text-align:center;
position: absolute;
z-index: 1;
}
button{
height: 50px;
background: #2c2d2e;
border: 0px solid #1d1e1f;
color: red;
font-weight: bolder;
font-family: sans-serif;
font-size: 13px;
color: grey;
padding-left: 20px;
padding-right: 20px;
width: 200px;
}
#menubutton{
width: 53px;
}
#menubutton{
position: absolute;
z-index: 99;
}
button:hover{
color: darkgrey;
background: #1d1e1f;
}
#welcome{
position: absolute;
z-index: 0;
left: 50px;
height: 100%;
width: 100%;
border: 0;
}
</style>
</body>
</html>I tried using text-align: center; on the h1, but it does not work. Then i found out that i had to use margin: auto; but it does not work too. Does anyone have a way to center the h1? I hope someone can help me.
It's not centering because h1 width is not equal to container's width.Add width:100vw to h1
<h1 id="titleh1" style="width: 100vw">YEBBUSPAM BETA</h1>