使用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

inline-block在width/height为div 定义时不是必需的.

默认情况下,div是一个block元素.

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

DEMO