我想在一条垂直线上制作我的两个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>
我发现没有问题因为文本不在这里居中。但问题不在于它没有集中(它在我的私人页面上)。问题是:当它居中时,它看起来像这样:
....电子邮件:
密码:
(......是空格)
感谢所有可以提供帮助的人。
答案 0 :(得分: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;
}
&#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;
或者你可以将这两个放在一个中心的包装中......
答案 1 :(得分:1)
这样做会完美地运作我已经尝试过了:
将其复制到: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}
答案 2 :(得分:0)
可以通过为块提供宽度,然后使用“自动”边距来对块进行居中。
正如我在评论中提到的,我不认为这些是标题,所以我把它们作为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;
}