1

So, I am new at coding. I was trying to make a very basic static webpage of a calculator using html and css and js.

This is the html

#input {
    margin: 0 auto;
}

#num {
    border-radius: 25px;
    background: #73AD21;
    display: inline-block;
    padding: 15px;
    width: 200px;
    height: 100px;
}
<body>
  <div id="input">
    <div id="num">
      <label for="num1">Enter the first number</label>
      <input type="number" name="num1" id="num1">
    </div>
    <div id="num">
      <label for="num2">Enter the second number</label>
      <input type="number" name="num2" id="num1">
    </div>
  </div>
  <div id="op">
    <div id="opadd"><input type="submit" name="add" class="add" value="Add" onclick="add()"></div>
    <div id="opsbtrct"><input type="submit" name="subtract" class="sbtrct" value="Subtract" onclick="sbtrct()"></div>
    <div id="opmult"><input type="submit" name="multiply" class="mult" value="Multiply" onclick="mult()"></div>
    <div id="opdvde"><input type="submit" name="divide" class="add" value="Divide" onclick="dvde()"></div>
  </div>
</body>

I want that the #num be centered horizontally. I tried using

margin: auto;

and

margin: 0 auto;

but nothing works. Please help.

I've been at it for hours.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • 3
    #num is duplicated, id attribute define a unique id, if you have multiple tag with same css rule, you should use class attribute and refer them with . instead of # – Lety Oct 22 '20 at 14:36
  • 1
    did you try text-align: center applicated to #input? – Lety Oct 22 '20 at 14:43
  • @Lety, `#input { text-align: center; }` would actually fix his issue there already. Its exactly the thing eh needs to do. – tacoshy Oct 22 '20 at 15:05
  • @lefty yes i tried text-align : center but nothing changed. –  Oct 23 '20 at 05:00
  • @lefty i gave the same id because i want them to be treated as different elements but the styling had to be same for both –  Oct 23 '20 at 05:02

2 Answers2

3

Here is the complicated way of doing this.

You should create a container div, so you can center the object in.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Jgreene
  • 105
  • 7
  • 2
    bad advice: for the sole reason that he need to restructure his page. He simply has to add `#input { text-align: center; }` even though you're not technically wrong, you make it way more complicated then necessary. Besides, if you provide help, you should use the snippets provided so it can be easier implemented. Besides he has a container div (#input) – tacoshy Oct 22 '20 at 15:04
  • 1
    Thank you for the advice, I was only trying to help. I usually over complicate things, and that is my fault. – Jgreene Oct 22 '20 at 15:06
-1

when you add margin: 0 auto be sure the html tag not inline or inline-block it should be 'block' css with specific width.

#num {
    border-radius: 25px;
    background: #73AD21;
    display: block;
    padding: 15px;
    width: 200px;
    height: 100px;
    margin: 1em auto;    
}
label{
  white-space: nowrap;
}

just replace this code hope your problem will fix. add white-space:nowrap for the label to use one line text. #num should be 'block' css with specific width like 200px and display block. thanks

NIKHIL CHANDRA ROY
  • 807
  • 11
  • 16