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

inline-blockwidth/height当您为 div定义 时，没有必要。

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

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

演示

Answer 2

使用死点...

.box {
    text-align: left;
    background-color:#3F48CC;
    color:white;
    font-weight:bold;
    height:150px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -100px;
    margin-top: -75px;
}

注意：负边距正好是高度和宽度的一半，它将元素拉回到完美的中心。仅适用于固定高度/宽度的元素。

更多信息：

• CSS 技巧示例
• jsFiddle 演示

Answer 3

jsFiddle 演示

带有居中表单的替代 jsFiddle DEMO以及这个CSS3 版本。

使表格看起来正确的关键是使用padding，它是盒子模型的一部分。这样做可以让您填充侧面，并保持文本左对齐。

HTML

<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" />
    <div class="buttons">
      <input name="submit" type="Submit" value="Register" />
      <input name="reset" type="reset" value="Clear Form" />
    </div>
  </form>
</div>

CSS：

.box {
  background-color:#3F48CC;
  color:white;
  font-weight:bold;
  height:150px;
  width: 150px;
  padding: 10px;
}

.buttons{
  padding-top: 20px;
}

截屏：