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>

我发现没有问题因为文本不在这里居中。但问题不在于它没有集中（它在我的私人页面上）。问题是：当它居中时，它看起来像这样：

....电子邮件：

密码：

（......是空格）

感谢所有可以提供帮助的人。

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

或者你可以将这两个放在一个中心的包装中......

Answer 2

这样做会完美地运作我已经尝试过了：

将其复制到：https://codepen.io/abhilashn/pen/GraJyp，您将看到结果：

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

并用url替换你在url下写的内容：

#hdtxt {
  font-size: 48px;
  font-weight: 600;
    margin-left:50%;
}
#mail,#pwd,#hdtxt
{
    font-family: 'Titillium Web', sans-serif;
   padding-top: 50px;
}

#mail,#pwd  {
  font-size: 38px;
  font-weight: 400;
  padding-top: 50px;
  padding-right: 700px;
}
#email_password
{
  margin-left:50%;
}

解释：这对您不起作用，因为您为text-align: center;添加了#mail 和#pwd，因为密码更高，然后发送电子邮件，所以你找到了这个结果。

margin-left:50%; make the element in the center horizontally.

margin-top:50%; make the element in the center vertically.

如果您只想以登录为中心，则必须省略： #email_password { 保证金左：50％; }

最佳实践：

如果你想为你的不同元素做同样的事情就这样做：

elemt1,element2,...
{style}

Answer 3

可以通过为块提供宽度，然后使用“自动”边距来对块进行居中。

正如我在评论中提到的，我不认为这些是标题，所以我把它们作为div。正如约翰内斯所提到的，你可以将它们放在包装器中，并使包装器居中。

我在这里做的是将“登录部分”设为<section>，其ID为“login”。这是具有背景图片的作品。

里面是登录字段，它是包装块，使用width: 15ex和margin: 0 auto规则居中 - 没有顶部或底部边距，自动左右边距，以及您可以自己选择合适的宽度我还给它一个背景颜色，这样就可以看到这里发生了什么;你不会为你的实际网站这样做。

这些也分享了大部分相同的样式，所以我删除了所有部分上的重复font-family等，并将它们放在登录字段块（div）上。

登录部分中的<h1>标题不同，因此它只是差异 ...它不需要重复的字体系列。由于我们正在讨论登录部分中的h1，因此我将其用作CSS选择器#login h1 {。

通过这些更改，所有部分都不需要特定的id，因此我删除了id="hdtxt"以及="mail"和="pwd"。如果您的javascript将直接操作这些元素，可能需要保留ID。

如果我这样做，很可能“电子邮件：”和“密码”这两个词会与<label>控件一起使用{/ 1}}。

<input>

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%;
}
.login-fields {
  font-family: 'Titillium Web', sans-serif;
  font-size: 38px;
  font-weight: 400;
  width: 15ex;
  margin: 0 auto;
  background-color: aliceblue;
}
#login h1 {
  font-size: 48px;
  font-weight: 600;
  text-align: center;
  padding-top: 50px;
}

h2不在同一垂直线上

3 个答案: