html – How can i center the elements inside the box i have created?

0
69
html - Animation after toggling doesn't apply the second style


I have created this counter app and now i want to center the buttons, counter and counter number in the center of this glass box that i have created.

Edit: fixed the code, added css.

Screenshot:
enter image description here
HTML:

<div class="container">
        <div class="inside-box">
            <h1>Counter App</h1>
            <h3 id="count-el">0</h3>
            <button class="button-29" id="increment-btn" onclick="increment()">INCREMENT</button>
            <button class="button-29" id="decrement-btn" onclick="decrement()">DECREMENT</button>
            <button class="button-29" id="reset-btn" onclick="reset()">RESET</button>
            <script src="/index.js"></script>
        </div>
    </div>

CSS:

body {
    text-align: center;
    background: linear-gradient(to right, #159957, #5468ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

}

h1 {
    font-family: "JetBrains Mono",monospace;

}

h3 {
    font-family: "JetBrains Mono",monospace;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .15);
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(5px);
  }

inside-box {
    text-align: center;
}



Source link

Leave a reply

Please enter your comment!
Please enter your name here