Html - Cant seem to get this element center?

AustinBelford
April 30, 2023
202 views
3 votes
3 Answers

I’m trying to get my registration text to align within my page. I’m sure it’s super simple but I’m totally lost.

I need _sign to be centered and the h1, h2, with it.

Center text, nothing happened, every other solution I’ve seen to similar issues just did nothing or pushed my registration text down further

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

Tags: css html

Answers

Solution

Add this to your CSS:

.main__content_sign h1, .main__content_sign h2 {
          text-align: center;
        }

This will make "Welcome To Stock.IO" and "Register Below To Gain Full Access To Our Site" text centered

Your updated code will become:

/* Register*/

.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_sign h1,
.main__content_sign h2 {
  text-align: center;
}

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

Links

text-align docs: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
How can I horizontally center an element?

Assuming that this is what you are looking for……

* {
      text-align: center;
      }
/* Register*/
    .main_register {
        background-color: #000000;
        }
        
        .main__container_register {
            display: grid;
            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;
        
        
        
        }

Generally it considered a good practice to avoid * {...} in css because it affects all elements. If you have an <html> tag please replace * with html.

- harshit
- April 30, 2023 at 8:02 am
- 0 votes
0
add text-align on main__content_sign,
```
 .main__content_sign{
      text-align: center;
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Cant seem to get this element center?

Answers

Solution

Links