Question 101458 in Html Question posted in
Some basic documentation can be found here.

Html – Cant seem to get this element center?

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:

3

Answers


  1. 0

    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

    1. text-align docs: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

    2. How can I horizontally center an element?

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 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.

Back To Top
Search