css - 使用 css 和 html 将 div 框居中，而不将框中的文本居中

Question

我想将我在此处制作的 div 框居中，但我不想将框中的文本居中，而且我似乎找不到如何执行此操作。现在我所拥有的是:

.box {
        text-align: left;
        background-color:#3F48CC;
        color:white;
        font-weight:bold;
        margin:120px auto;
        height:150px;
        display: inline-block;
        width: 200px;
    }

和

<div class=box>
    Login
    <form method ="post" action="addMember.php">
      <label for="name">Username:</label>
      <input name="name"/>
      <label for="password">Password:</label>
      <input name="password"/>
        <p>
        <input name="submit" type="Submit" value="Register"/>
        <input name="reset" type="reset" value="Clear Form">
  </form>
 </div>

提前致谢!

Answer 1

删除 display: inline-block; & text-align:center

当您为 div 定义 width/height 时，

inline-block 不是必需的。

默认情况下，div 是一个 block 元素。

.box {       
        background-color:#3F48CC;
        color:white;
        font-weight:bold;
        margin:120px auto;
        height:150px;        
        width: 200px;
    }

DEMO