Can't center title - horizontally + vertically

Current result - image 1 Desired result - image 2 Code, HTML:

<section class="hero">
        <div class="container">
          <div class="hero__content">
            <div class="hero__heading">
              <h1 class="heading color--primary">
                Residential &amp;
                Commercial
              </h1>
            </div>
            <div class="hero__sub-heading">
              <p class="sub-heading">appliance <span class="color--primary">repair</span></p>
            </div>
            <div class="hero__cta">
              <img src="./imgs/Scroll_Down_Arrow.svg" alt="">
            </div>
          </div>
        </div>
      </section>

<section class="hero">
        <div class="container">
          <div class="hero__content">
            <div class="hero__heading">
              <h1 class="heading color--primary">
                Residential &amp;
                Commercial
              </h1>
            </div>
            <div class="hero__sub-heading">
              <p class="sub-heading">appliance <span class="color--primary">repair</span></p>
            </div>
            <div class="hero__cta">
              <img src="./imgs/Scroll_Down_Arrow.svg" alt="">
            </div>
          </div>
        </div>
      </section>

SCSS:

.hero
{
    width: 100%;
    height: calc(100vh - 125.594px);
    background-color: $color-grey;
    overflow: hidden;
}

.hero__content
{
    margin-top: 80px;

    .contact-list__link
    {
        color: $color-primary;
    }
}

.hero__heading
{
}

.hero__sub-heading
{
    margin-top: -30px;
    
    .sub-heading
    {
        font-size: $font-size-xx-large;
        text-transform: capitalize;
        color: $color-black;
    }
}

.hero
{
    width: 100%;
    height: calc(100vh - 125.594px);
    background-color: $color-grey;
    overflow: hidden;
}

.hero__content
{
    margin-top: 80px;

    .contact-list__link
    {
        color: $color-primary;
    }
}

.hero__heading
{
}

.hero__sub-heading
{
    margin-top: -30px;
    
    .sub-heading
    {
        font-size: $font-size-xx-large;
        text-transform: capitalize;
        color: $color-black;
    }
}

I tried flexbox, position: absolute but didn't work. Any suggestions and what else should learn to understand/accomplish this goal. Thanks.

4 Replies

clevermissfox•5mo ago

Text-align: center as the heading is a block element by default so takes up all the space. All an outline:1px solid blue to that heading and you’ll see it has no margin to distribute. If you don’t want text align canter and want it to be left justified but center, use flex and justify-content : center which will squish it down to its max-content: size when there’s enough space. If you still have issues please copy the relevant code into a https://codepen.io

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

interactive-harpOP•5mo ago

Tried didn't work lol

clevermissfox•5mo ago

then please copy the relevant code into a codepen or codesandbox . if you havent yet, go into the dev tools to get a visual of how big your elements are and/or put a background color or outline on them so you can see their boundaries. there is something in your code if flex and/or position: absolute didnt work . is there a reason you have a wrapper on all of your elements that only have one child inside them? the img i get but why wrap your h1, and your p.subheading ? you have:

hero > container > hero__content > (hero__heading > h1) + (hero__subheading > p ) + (hero__cta > img)

hero > container > hero__content > (hero__heading > h1) + (hero__subheading > p ) + (hero__cta > img)

i bet you could nix at least one of those layers if not two

interactive-harpOP•5mo ago

solved it, was HTML issue with h1: the whole heading needed to be split into two parts

Gaming

Programming

Can't center title - horizontally + vertically