I went on W3 school website where they say that in order to center an element horizontally I must set the margin to 0 and set the width to any value but 100%. Which I did. I mean I set the width to 50%. Yet my button isn't centered. Help please. Also if you know how to center an element vertically too, please drop me a line.
const image = document.getElementById("image"); const btn = document.getElementById("btn"); const people = ["pierre", "paul", "jacques", "henry" ]; const date = new Date().getDay(); const daysOfWeek = Array.from({length: 7}, (item, i) => { return new Date(0,0,i).toLocaleDateString("en-US", {weekday: "long"}) }) var today = daysOfWeek[date]; const names = { "Monday": "emilie", "Tuesday": "emilie", "Wednesday": "jessica", "Thursday": "jessica", "Friday": "paul", "Saturday": "paul", "Sunday": "pierre", } btn.addEventListener("click", function() { date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill` : date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying` : date >= 4 && date < 6 ? personPaying = `Hi ${names[today]}, today is ${today} so although we are in Amsterdam we're not going ducth` : personPaying = `Hi ${names[today]}, today is ${today}, your turn to pay today` btn.style.display = "none"; <!-- message to the person paying --> let message = document.getElementsByClassName("message")[0]; message.style.display = "block"; message.textContent = personPaying; <!--avatar of person paying --> image.src = `picture/${names[today]}.png`; image.alt = "picture of an avatar"; <!--displaying <i/> tags --> var unseenArray = [...document.getElementsByClassName("unseen")] unseenArray.map(x => x.style.display = "inline"); <!--displaying containers and setting height --> let containers = document.getElementsByClassName("containers"); for (var i = 0; i < containers.length; i++) { containers[i].style.display = "block"; } for (var i = 0; i < containers.length; i++) { containers[i].style.height = "920px"; } <!-- floating divs with class container to left --> for(var i = 0; i < containers.length; i++) { containers[i].style.cssFloat = "left" } document.getElementsByTagName("h1")[0].textContent = `Hi ${names[today]} select you mehtod of payment` }, false);button { box-shadow: 5px 10px; font-family: 'Krona One', "sans-serif"; font-size: 30px; font-weight: light; padding: 10px; transition: 0.5s; width: 50%; margin: auto; } button:hover { box-shadow: 5px 10px; } body { background-color: rgb(180, 180, 180); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; background-size: auto; } .message { border-style: inset; border-width: medium; border-radius: 15px; box-shadow: 5px 10px; display: none; padding: 20px; text-align: center; background-color: rgb(250, 250, 250); font-family: "Copperplate", "Papyrus", "fantasy"; font-size: 50px; font-variant: "small-caps"; margin: 100px 50px 75px 100px; } div.containers { width: 400px; height: 400px; margin: 50px; display: none; } i.unseen { display: none; max-width: 100px; margin-top: 15px; } img { box-shadow: 5px 10px; width: 30%; float: right; top: 0px; } h1 { font-family: "Copperplate", "Papyrus", "fantasy"; }<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Who's buying today</title> <link rel="stylesheet" href="index.css"> <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script> </head> <body> <button id="btn" type="submit">who's paying</button> <div class="containers"> <div class="message"></div> <img id="image" src=""> </div> <div class="containers"> <h1></h1> <a href="form.html"><i class="fab fa-cc-visa unseen"></i></a> <i class="far fa-money-bill-alt unseen"></i> </div> <script src="index.js" type="text/javascript"></script> </body> </html>
