0

I am trying to centre a button on a simple website, and I have looked at many tutorials and the main concepts are flexboxes and margins.

I have gone through the full tutorial for both of those and I have not managed to get either working.

What can I improve to make this code work?

function genSquawk() {
    const div = document.getElementById('squawk')
    var num1 = Math.floor(Math.random() * 7);
    var num2 = Math.floor(Math.random() * 7);
    var num3 = Math.floor(Math.random() * 7);
    var num4 = Math.floor(Math.random() * 7);
    div.textContent = `${num1}${num2}${num3}${num4}`;
}
body {
    background-color: dimgray;
    font-family: Arial, Helvetica, sans-serif;
}

.button.center {
    margin: auto 0;
    width: 50%;
    border: 3px solid black;
    padding: 10px;
}

.button {
    width: 500px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 70px;
}

#squawk {
    color: white;
    padding: 50px;
    text-align: center;
    font-size: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel = "stylesheet" href = "index.css">
    <script src = "index.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "squawk">0000</div>
    <button onclick = "genSquawk()" class="button center">CREATE SQUAWK</button>
</body>
</html>
mel.pear
  • 35
  • 5
  • as it's an inline element, you would need text align center on the parent, otherwise make it block and change the margin auto so the left and right are auto instead of top and bottom – Pete Aug 05 '22 at 08:45
  • I do not see any display:flex anywhere here (nor height) so the button could center itself being a flex child. – G-Cyrillus Aug 05 '22 at 08:46

1 Answers1

2
  1. You wrote 'auto 0' instead of '0 auto' for your margin
  2. You didn't use display block

function genSquawk() {
    const div = document.getElementById('squawk')
    var num1 = Math.floor(Math.random() * 7);
    var num2 = Math.floor(Math.random() * 7);
    var num3 = Math.floor(Math.random() * 7);
    var num4 = Math.floor(Math.random() * 7);
    div.textContent = `${num1}${num2}${num3}${num4}`;
}
body {
    background-color: dimgray;
    font-family: Arial, Helvetica, sans-serif;
}

.button.center {
    margin: 0 auto;
    width: 50%;
    border: 3px solid black;
    padding: 10px;
    display: block;
}

.button {
    width: 500px;
    height: 250px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 70px;
}

#squawk {
    color: white;
    padding: 50px;
    text-align: center;
    font-size: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel = "stylesheet" href = "index.css">
    <script src = "index.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "squawk">0000</div>
    <button onclick = "genSquawk()" class="button center">CREATE SQUAWK</button>
</body>
</html>
Wimanicesir
  • 4,606
  • 2
  • 11
  • 30