html - 为什么我不能在 H1 标签中使用 padding-left

Question

这是我的网页项目：

我想将“登录”文本集中在中心，我知道我可以使用text-align:center;. 我的问题是：当我尝试使用padding-left ormargin-left时，文本不会向右移动。

这是我的代码：

body {
  padding: 0;
  border: 0;
  background: url(test4.jpg) no-repeat;
  background-size: cover;
  font: sans-serif;
}

.box {
  position: absolute;
  background: rgba(0, 10, 0, 0.5);
  width: 500px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
  width: 100%;
  color: white;
  padding: 6px;
  margin-bottom: 30px;
}

.password,
.password-input,
.username,
.username-input {
  margin: 10px;
  height: 20px;
  width: 90%;
}

.btn {
  width: 90%;
  height: 30px;
  margin: 10px;
  background: none;
  outline: none;
  border: 1px solid #35aa23;
  color: white;
}

.password,
.username {
  color: white;
  font-size: 20px;
  font: sans-serif;
}

.password-input,
.username-input {
  color: white;
  font: sans-serif;
  border: none;
  overflow: hidden;
  border-bottom: 2px solid #35aa23;
  font-size: 15px;
  background: none;
  outline: none;
}

<div class="box">
  <h1>Login</h1>
  <div class="username-div">
    <span class=" username ">Username</span>
  </div>

  <div class="username-input-div">
    <input type="text " class="username-input " name=" " id=" ">
  </div>

  <div class="password-div">
    <span class="password ">Password</span>
  </div>

  <div class="passoword-input-div">
    <input type="password" class="password-input ">
  </div>

  <div class="btn-div">
    <input type="submit" class="btn" value="Sig in">
  </div>


</div>

标签： htmlcss

Answer 1

如果您添加text-align: center到 h1 元素，您的代码可以正常工作。