我正试图让我的注册文本在我的页面内对齐。我知道这很简单,但我完全迷路了。
我需要_sign居中,h1,h2也居中。
中心文本,什么也没发生,每一个其他的解决方案,我看到类似的问题只是没有做什么或推我的注册文本进一步下降
/*already a user section*/
.main_register {
background-color: #000000;
}
.main__container_register {
display: grid;
grid-template-columns: ifr ifr;
align-items: center;
justify-self: center;
margin: 0 auto;
height: 80vh;
background-color: #000000;
z-index: 1;
width: 30%;
max-width: 1270px;
padding: 0 50px;
}
.main__content_register h1 {
font-size: 1.3rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content_register h2 {
font-size: 1rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content_register p {
margin-top: 1rem;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
}
.main__btn_register {
font-size: 0.8rem;
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn_register a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn_register::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn_register:hover {
color: #fff
}
.main__btn_register:hover:after {
width: 100%;
}
.main_img_register--container {
text-align: right;
}
#main__img_signup {
height: 20%;
width: 30%;
}
/* Actual registry*/
.main__content_sign {
text-align: center;
}
.main__container_sign {
display: grid;
grid-template-columns: ifr ifr;
align-items: center;
justify-self: center;
margin: 0 auto;
height: 80vh;
background-color: #000000;
z-index: 1;
width: 100%;
max-width: 1270px;
padding: 0 50px;
}
.main__sign {
background-color: #6e50f5;
}
.main__container_sign {
float: left;
padding-right: 3000px;
padding-bottom: 2000px;
}
.main__content_sign h1 {
font-size: 1.3rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content_sign h2 {
font-size: 1rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content_sign p {
margin-top: 1rem;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
}
<!--Hero section-->
<div class="main_register">
<div class="main__container_register">
<div class="main__content_register">
<h1>Stock IO </h1>
<h2>Already A User?</h2>
<p>Sign In Below</p>
<button class="main__btn_register"><a href="/login.html">Login</a></button>
</div>
<div class="main__img_register--container">
<img src="img/signup.svg" alt="pic" id="main__img_signup">
</div>
</div>
</div>
<div class="main_sign">
<div class="main__container_sign">
<div class="main__content_sign">
<h1>Welcome To Stock.IO </h1>
<h2>Register Below To Gain Full Access To Our Site</h2>
<p>S</p>
</div>
</div>
</div>
3条答案
按热度按时间mqkwyuun1#
假设这就是你要找的。.....
一般来说,在css中避免
* {...}
被认为是一个好的做法,因为它会影响所有的元素。如果您有<html>
标签,请将*
替换为html
。gfttwv5a2#
在main__content_sign上添加text-align,
5ktev3wc3#
解决方案
把它添加到你的CSS中:
这将使“欢迎到库存。IO”和“在下面注册以获得对我们网站的完全访问权限”文本居中
更新后的代码将变为:
友情链接
text-align
文档:https://developer.mozilla.org/en-US/docs/Web/CSS/text-align