How to center Title inside a hero-text class

How to center Title inside a hero-text class
0

Tell us what’s happening:

I am unable to center the title, can anyone help me with that ?

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page

I added a background color to help see what is going on…

.hero-text {
  position: absolute;
  background-color: red;
  top: 50%;
  left: 50%;
}

What is position: absolute doing, and does it need to be like this? What are top/left doing ? Where is the origin (0,0) of this element?

<body>

    <header id="title">

      <div class="hero-text row">

        <h1>Jadav Payeng</h1>

        <p>Forest Man of India</p>

      </div>

    </header>

  </body>

For the above code i tried to do it without position property it didn’t work. I thought let take this element out of flow then top and right will work. But unfortunately that also didn’t work.

No it does not need to be like this as i said, i am a beginner i don;t have that much experience. With out top left how can i center my div and text within it ? :smiley: Please help

Remove the positioning and try margin: auto :grinning:

Still not working

It took the div to top :smile:

Hey mr. pjonp i found the solution in google here : https://css-tricks.com/centering-css-complete-guide/

setting transform: translate(-50%, -50%) solves the issue or by using display:flexbox and aligning it on both axis central.

But i really don’t understand how it work. Could you help me with that ??