无法居中元素

Question

所以，我是编码新手。我试图使用 html 和 css 和 js 制作一个非常基本的计算器静态网页。

这是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>

我希望#num 水平居中。我尝试使用

margin: auto;

和

margin: 0 auto;

但没有任何效果。请帮忙。

我已经用了几个小时了。

Answer 1

这是执行此操作的复杂方法。

您应该创建一个容器 div，这样您就可以将对象居中。

#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>

Answer 2

当您添加边距时：0 auto 确保 html 标签不是内联的或 inline-block 它应该是 'block' css 具有特定宽度。

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

只需替换此代码，希望您的问题会得到解决。为标签添加 white-space:nowrap 以使用一行文本。 #num 应该是 'block' css 具有特定的宽度，例如 200px 和显示块。谢谢

无法居中元素

Unable to center the elements

html

css

styling