How to vertically and horizontally center text that is set to text-align: left; inside a container

Question

I can't seem to perfectly center a text logo in CSS due to setting the text align to left for stylistic design purposes.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  padding: 20px;
  height: 50vh;
}

.grid-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Change align-items to flex-start */
  text-align: center;
  /* Add this line */
}

.brand {
  font-family: 'GT-Walsheim';
  color: #E7F6F2;
  font-size: 100px;
  line-height: 0.75;
  word-spacing: 6em;
  text-align: left;
}

.brand span {
  color: #00bb7b;
}

<div class="grid-container">
  <div class="grid-item">
    <h1 class="brand">Green Checks Bet Club<span>.</span></h1>
    <button type="button" class="signup-btn">Sign Up</button>
  </div>
  <div class="grid-item"></div>
</div>

It becomes perfectly centered when I remove the 'text-align: left;' property, I want the Typographic alignment of the text logo to remain left but the actual class element to be centered horizontally in the container. is this possible?

Answer 1

Seems like your h1 element is taking more space than needed, therefore your text aligns left in a big rectangle across the screen. You can check this by making the background of the h1 element red and then removing it when done.

One way you can avoid this is by adding

width: min-content;

to your h1. So the CSS code would have to look like this:

.brand {
  font-family: 'GT-Walsheim';
  color: #E7F6F2;
  font-size: 100px;
  line-height: 0.75;
  word-spacing: 6em;
  text-align: left;
  width: min-content; /* only this is new */
}

If you ever suspect that the shape of an element is creating problems, giving the background of all the elements involved a color helps you visualize everything that's going on. It's a great habit. If the solution above is breaking other things later, you can go back to this step and use this trick.