html - h2不在同一垂直线上

Question

我想在一条垂直线上制作我的两个 h2，因此第一个字母位于同一水平位置。这是一个

html,
body {
  height: 100%;
}

.login {
  margin: 0;
  padding: 0;
  background-image: url(https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#hdtxt {
  font-family: 'Titillium Web', sans-serif;
  font-size: 48px;
  font-weight: 600;
  text-align: center;
  padding-top: 50px;
}

#mail {
  font-family: 'Titillium Web', sans-serif;
  font-size: 38px;
  font-weight: 400;
  text-align: center;
  padding-top: 50px;
  padding-right: 700px;
}

#pwd {
  font-family: 'Titillium Web', sans-serif;
  font-size: 38px;
  font-weight: 400;
  text-align: center;
  padding-top: 50px;
  padding-right: 700px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
  <h1 id="hdtxt">LOGIN</h1>
  <h2 id="mail">Email:</h2>
  <h2 id="pwd">Password:</h2>
</div>

好吧，我发现没有问题，因为文本没有在此处居中。但问题不在于它没有居中(它在我的私有(private)页面上)。问题是:当它居中时，它看起来像这样:

....电子邮件:

密码:

(....是空格)

感谢所有能提供帮助的人。

Answer 1

只需删除文本居中并为两者使用相同的 padding-left，最好是百分比值:

html,
body {
  height: 100%;
}

.login {
  margin: 0;
  padding: 0;
  background-image: url(https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#hdtxt {
  font-family: 'Titillium Web', sans-serif;
  font-size: 48px;
  font-weight: 600;
  text-align: center;
  padding-top: 50px;
}

#mail {
  font-family: 'Titillium Web', sans-serif;
  font-size: 38px;
  font-weight: 400;
  padding-top: 50px;
  padding-left: 40%;
  color: yellow;
}

#pwd {
  font-family: 'Titillium Web', sans-serif;
  font-size: 38px;
  font-weight: 400;
  padding-top: 50px;
  padding-left: 40%;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login">
  <h1 id="hdtxt">LOGIN</h1>
  <h2 id="mail">Email:</h2>
  <h2 id="pwd">Password:</h2>
</div>

或者你可以把这两个放在一个你居中的包装器里....