I can’t center text - CSS

Asked

Viewed 63 times

-3

I need to center the header text, I’ve tried several ways and it doesn’t work. Does anyone know where the bug is??

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

header {
  min-height: 9px;
  display: flex;
  align-items: center;
  background-color: #383c38;
}

header h1 {
  font-size: 2.5em;
  color: #fff;
}
<header>
  <h1>Login-Helper</h1>
</header>

html css css-centering

  • If you want to use flex to center horizontally, in your example use justify-content: center, nay align-items.

1 answer

2

The text of header is inside a tag H1, that does not occupy all the size of the header, add to it a width: 100% will work simply by using together a text-align: center:

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

header {
  min-height: 9px;
  display: flex;
  align-items: center;
  background-color: #383c38;
}

header h1 {
  font-size: 2.5em;
  color: #fff;
  width: 100%;
  text-align: center;
}
<header>
  <h1>Login-Helper</h1>
</header>

Another way to need to use the width: 100% is using margin: 0 auto (can see more about margin here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin):

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
}

header {
  min-height: 9px;
  display: flex;
  align-items: center;
  background-color: #383c38;
  margin: 0 auto;
}

header h1 {
  font-size: 2.5em;
  color: #fff;
  margin: 0 auto;
}
<header>
  <h1>Login-Helper</h1>
</header>

  • I tried both suggestions and it doesn’t work. Something wrong with my vs code, so can.. rs

  • vs code is just an editor, you need to save and open in the browser to test which is where it gets rederized correctly. Anyway have there two examples working, check if in the browser not right

Browser other questions tagged html css css-centering

You are not signed in. Login or sign up in order to post.