Cant seem to get this element center?

Question

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>

You want to center "Register Below To Gain Full Access To Our Site", Am I right? — Anonymous, Apr 30 '23 at 05:42
Yes that and welcome to stock io, im planning on making fields for registration under it such as email, etc. — Austin Belford, Apr 30 '23 at 05:46

Anonymous · Answer 1 · 2023-04-30T06:23:26.797

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?

score 0 · Answer 2 · answered Apr 30 '23 at 05:52

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.

score 0 · Answer 3 · answered Apr 30 '23 at 06:02

0

add text-align on main__content_sign,

 .main__content_sign{
      text-align: center;
}

answered Apr 30 '23 at 06:02

harshit

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 30 '23 at 06:08
unfortunately none of these solutions worked, the text-align: center worked when placed on the .main_register class, not on the .main__content_sign class which comes after it, and when i removed the text-align from .main__register it remained the same in the middle of webpage. so confused – Austin Belford Apr 30 '23 at 06:17

Cant seem to get this element center?

3 Answers3

Solution

Links