Can HTML center some buttons?

kristijanlazarev
May 17, 2023
99 views
2 votes
3 Answers

I am a beginner-ish front end Developer, and I have done something with my css stylesheet that whatever I do I cant seem to get my buttons on the page to be aligned as if it was a calculator? I know many of you would know this so, thank you for your help forward.

.mainContent button {
  font-family: inherit;
  padding: 1em 2em;
  border: 3px solid black;
  width: 2em;
  background-color: #edf2fb;
  color: black;
  border-radius: 0.35em;
  font-size: 1.2em;
  margin: 0.1em auto;
  display: flex;
  justify-content: center;
}

<section class="mainContent">
  <button id="result">Result</button>
  <button id="clear">C</button>
  <button id="one">1</button>
  <button id="two">2</button>
  <button id="three">3</button>
  <button id="four">4</button>
  <button id="five">5</button>
  <button id="six">6</button>
  <button id="seven">7</button>
  <button id="eight">8</button>
  <button id="nine">9</button>
  <button id="zero">0</button>
  <button id="plus">+</button>
  <button id="minus">-</button>
  <button id="multiply">*</button>
  <button id="divide">/</button>
  <button id="equal">=</button>
  <button id="comma">,</button>
  <input type="text" placeholder="Your calculations">
</section>

How do you do this? They are just lined up in the center one by one going down!

I tried all this justify content, text align, grid but I cant seem to get any to work

Answers

Try This

.mainContent {
  font-family: inherit;
  width: 400px;
  padding: 1em 2em;
  border: 3px solid black;
  background-color: #edf2fb;
  border-radius: 0.35em;
  font-size: 1.2em;
}

input {
  margin-bottom: 20px;
}

#buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Creates four columns with equal width */
  gap: 10px;
}

<section class="mainContent">
  <input type="text" placeholder="Your calculations">
  <div id='buttons'>
    <button id="result">Result</button>
    <button id="clear">C</button>
    <button id="one">1</button>
    <button id="two">2</button>
    <button id="three">3</button>
    <button id="four">4</button>
    <button id="five">5</button>
    <button id="six">6</button>
    <button id="seven">7</button>
    <button id="eight">8</button>
    <button id="nine">9</button>
    <button id="zero">0</button>
    <button id="plus">+</button>
    <button id="minus">-</button>
    <button id="multiply">*</button>
    <button id="divide">/</button>
    <button id="equal">=</button>
    <button id="comma">,</button>
  </div>
</section>

You can use display:grid; and grid-template-columns attribute to mainContent class not to .mainContent button class for aligning the buttons properly. Additionally i put the input element in to the different div which has calculation class and i gave it inline css values. Finally added display:flex; and justify-content:center; attributes for aligning the input element (.calculation class) to the center. I hope it works for you.

.mainContent button {
  font-family: inherit;
  padding: 1em 2em;
  border: 3px solid black;
  background-color: #edf2fb;
  color: black;
  border-radius: 0.35em;
  font-size: 1.2em;
  display: block;
  margin: 0.1em;
}

.mainContent {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: center;
}

.calculation {
  display: flex;
  justify-content: center;
}

 <div class="calculation"><input style="width: 410px; height: 60px;" type="text" placeholder="Your calculations">
    </div>
    <section class="mainContent">
        <button id="result">Result</button>
        <button id="clear">C</button>
        <button id="one">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="zero">0</button>
        <button id="plus">+</button>
        <button id="minus">-</button>
        <button id="multiply">*</button>
        <button id="divide">/</button>
        <button id="equal">=</button>
        <button id="comma">,</button>

    </section>

.mainContent button {
    font-family: inherit;
    border: 3px solid black;
    padding: 25px;
    margin: 10px;
    width: 10em;
    background-color: #edf2fb;
    color: black;
    border-radius: 0.35em;
    font-size: 1.2em;
    text-align: center;
}

.mainContent {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

<!-- 
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <input type="text" placeholder="Your calculations">
  <section class="mainContent">
        <button id="result">Result</button>
        <button id="clear">C</button>
        <button id="one">1</button>
        <button id="two">2</button>
        <button id="three">3</button>
        <button id="four">4</button>
        <button id="five">5</button>
        <button id="six">6</button>
        <button id="seven">7</button>
        <button id="eight">8</button>
        <button id="nine">9</button>
        <button id="zero">0</button>
        <button id="plus">+</button>
        <button id="minus">-</button>
        <button id="multiply">*</button>
        <button id="divide">/</button>
        <button id="equal">=</button>
        <button id="comma">,</button>
        
    </section>
  <script src="script.js"></script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.