Unable to center text with CSS HTML-CodePudding

I am trying to center my text with CSS and HTML. I'm really new to web development and so am just getting started. I watched a course on the basics (made the first page) and now I'm working on my own project (the other pages)

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  font-size: 62.5%
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #FFFFFF;
}

.second-page {
  background-color: #04041af9;
  padding: 4.8rem 0 9.6rem 0;
}

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
}

.heading-secondary {
  font-size: 5.2rem;
  font-weight: 700;
  /*line-height: 1.05;*/
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 3.2rem;
}

<section >
  <div >
    <h1 >
      Why buy through us?
    </h1>
  </div>
</section>

However, it simply will not center! I've spent hours researching it so I've finally come here for help. I've attached an image of what it looks like:

All I want is for it to appear central) - horizontally at least! How am I supposed to achieve this (note that the section is the second)? Thanks.

CodePudding user response：

The text is not centering because the h1 element is not a direct child of the .our-news div. You can either make the h1 element a direct child of the .our-news div and use the text-align property on the .our-news class or you can set the text-align property on the h1 element itself.

It appears that your code is mostly correct, but the text alignment is not set to center. The text-align: center; and justify-content: center; display: flex; properties are not added to the CSS for the .heading-secondary and .our-news classes, this is why the text is not centered.

Also, you can use align-items: center; in the .our-news class to center the text vertically.

Here is the corrected code:

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heading-secondary {
  font-size: 5.2rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 3.2rem;
  text-align: center;
}

It should work fine after this modification.

CodePudding user response：

You have uneven padding in your section. You need to provide uniform values like padding: 5rem 0; so that the spacing is even in the entire section
You have used grid-template-columns: 1fr 1fr in .our-news which tells that there will be 2 columns inside the container which occupies equal space. So you need to change this line to:

grid-template-columns: 1fr;
You gave a margin bottom to heading-secondary. Remove that line so that there won't be any unwanted spaces below the text.

Modified code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  font-size: 62.5%
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #FFFFFF;
}

.second-page {
  background-color: #04041af9;
  padding: 5rem 0;
}

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9.6rem;
  align-items: center;

}

.heading-secondary {
  font-size: 5.2rem;
  font-weight: 700;
  /*line-height: 1.05;*/
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: -0.5px;
}

<section >
      <div >
        <h1 >
          Why buy through us?
        </h1>
      </div>
    </section>

CodePudding user response：

You can make it very simple with text-align: center. Without flex or grid.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  font-size: 62.5%
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #FFFFFF;
}

.second-page {
  background-color: #04041af9;
  padding: 4.8rem 0 9.6rem 0;
  margin: 0 auto;
}

.our-news {
  text-align: center; /* only this one you need!*/
}

.heading-secondary {
  font-size: 5.2rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 3.2rem;
  width: 360px;
  display: inline-block; /* make the block element to a inliner*/
  
}

<section >
  <div >
    <h1 >
      Why buy through us?
    </h1>
  </div>
</section>

CodePudding user response：

It looks like you're on the right track, but there are a couple of things you can try to center the text.

Try using the text-align property on the parent element, in this case, the .our-news class.

.our-news {
  text-align: center;
}

Use the justify-content property on the .our-news class.

.our-news {
  justify-content: center;
}

Apply the margin: 0 auto; on the h1 element.

.heading-secondary {
  margin: 0 auto;
}

You can also use the transform: translate(50%, -50%); property along with position: absolute; and top: 50%; left: 50%; on the h1 element.

.heading-secondary {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Try these different solutions one by one and check which one works best for you.

CodePudding user response：

You can play with display grid functionality. You can see snippets for your answer. Thank You !!

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  font-size: 62.5%
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #FFFFFF;
}

.second-page {
  background-color: #04041af9;
  padding: 4.8rem 0 9.6rem 0;
}

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.heading-secondary {
  font-size: 5.2rem;
  font-weight: 700;
  /*line-height: 1.05;*/
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: -0.5px;
  margin-bottom: 3.2rem;
}

<section >
  <div >
    <h1 >
      Why buy through us?
    </h1>
  </div>
</section>