Center text in header

Asked

Viewed 3,109 times

2

Hello, everyone. I created a header with 100% screen size (independent of screen size) like this:

header {
  background-image: url('img/background.jpg');
  height: 100vh;
  width: 100%;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

I need my text to be in the center of this header (horizontal and vertical).

html css html5 css3

2 answers

1


Can use transform: translateY() to center vertically and text-align: center to center horizontally:

header{
   background-image: url('img/background.jpg');
   height: 100vh;
   width: 100%;
   background-color: yellow;
 }

.texto-header{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

  • Dude, something didn’t work out. The text was in the middle of the page, but it wasn’t exactly in the middle, you know? It was kind of aligned to the left.

  • I made a small change, look now.

  • Now it worked. I believe that a menu I had made here also messed up, hehe. Thank you very much, =).

0

Try this below, I used the display:flex and its estates in class texto-header:

header {
  background-image: url('img/background.jpg');
  height: 100vh;
  width: 100%;
}

.texto-header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;  
  align-items: center;
}
<header>
  <div class="texto-header">
    <h1>Nova Zelândia</h1>
    <p>Um paraiso do outro lado do mundo.</p>
  </div>
</header>

  • Dude, it didn’t work. The text was centered horizontally, but it wasn’t vertically.

Browser other questions tagged html css html5 css3

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