How to center a h1 tag inside a section tag

Question

I need to center-left a < h1 > element inside a < section >, however, I'm struggling finding the correct method.

I've tried using justify-content and text-align, but it doesn't move it. I can move with it padding, but, I'm not sure this is good responsively.

HTML:

<section class="hero">
  <h1 class="hero__title">My Website</h1>
  <img
    class="hero__image"
    src="./assets/images/hero-bio.jpg"
    alt="hero-image"
  />
</section>

SCSS:

    .hero {
  width: 100%;
  height: 700px;
  position: relative;

  &__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  &__title {
    color: white;
    font-size: 6rem;
    position: absolute;
  }
}

_"I've tried using justify-content and text-align"_ - both pretty pointless, when you have the h1 absolute positioned. That means it will only be as wide as its content demands to begin with. Trying to "center" the content in an element, that is only as wide as its content to begin with, makes little sense. — CBroe, Jun 08 '22 at 11:10

score 0 · Accepted Answer · answered Jun 08 '22 at 11:17

0

Using top: 50% would work in your current situation.

answered Jun 08 '22 at 11:17

xstax

96
2
11

How to center a h1 tag inside a section tag

1 Answers1