align-items: center and navigation

Question

I'm using flexbox to center vertically and horizontally the text in my header which is full screen. However I also want to have navigation and some logo in there, but of course these two go to the middle.

How do I fix this so I can have my nav and logo on top and the text in the middle with flexbox?

Here's my code:

HTML:

<header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    <h2>Template</h2>
    <h1>Welcome to my page</h1>
    <a href="#">Learn More</a>
</header>

CSS:

header {
    height: 100vh;
    background: url(img/showcase.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

Thanks in advance.

Could you show a mockup about the layout you want to achieve? — brian17han, Nov 02 '17 at 21:49
which one is your logo? https://www.w3schools.com/code/tryit.asp?filename=FL5GR6KBHO7J — apsuva, Nov 02 '17 at 21:50
Oh, sorry guys, there's no logo in this markup, guess I deleted it for some reason. But in this editor @apsuva sent there's a nav in the middle, I want it on top of the page. — B.Mat, Nov 02 '17 at 22:02
https://i.imgur.com/cTRCB1n.jpg The navbar is going to the middle with the text. I want it to be on the top and keep my headers where they are. — B.Mat, Nov 02 '17 at 22:12
like that ? https://www.w3schools.com/code/tryit.asp?filename=FL5HKRWCD3B0 — apsuva, Nov 02 '17 at 22:18
Yeah, kinda but it looks like that: https://i.imgur.com/yvtvZE9.png I want the nav to be within the background image (no white space) — B.Mat, Nov 02 '17 at 22:29
https://www.w3schools.com/code/tryit.asp?filename=FL5ZLETOE7PQ i will add answer. can you check my answer as correct answer? — apsuva, Nov 03 '17 at 08:41
@apsuva I think you should add overflow:hidden and your solution works fine too. Thanks a lot! — B.Mat, Nov 03 '17 at 11:40

G-Cyrillus · Accepted Answer · 2017-11-02T22:58:58.637

you can use margin-bottom:auto to make the code simpliest and shorter:

* {
  /* reset */
  margin: 0;
}

header {
  height: 100vh;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(http://lorempixel.com/640/480/technics/1) center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

nav,
header>a {
  margin: 0 0 auto;
  /* will adjust from bottom: 
  result is the group <h2>,<h1> and <a> having margin:auto on top and bottom 
  putting them together in the middle of the space of header unused by <nav>*/
}


/* for the fun and demo of margin behavior */

header:hover {
  flex-flow: column-reverse;
}

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  <h2>Template</h2>
  <h1>Welcome to my page</h1>
  <a href="#">Learn More</a>
</header>

Else you can start from justify-content:space-between; and reset margin on each element to center.

* {
  /* reset */
  margin: 0;
}

header {
  height: 100vh;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(http://lorempixel.com/640/480/technics/1) center center;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

h2 {
  margin: auto auto 0;
}

h1 {
  margin: 0;
}

a {
  margin: 0 auto auto
}


/* for the fun and demo of margin behavior */

header:hover {
  flex-flow: column-reverse;
}

<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  <h2>Template</h2>
  <h1>Welcome to my page</h1>
  <a href="#">Learn More</a>
</header>

Both snippets seem similar , but they are not . hover header to see the margin effects*(flow is reversed to show it)*.

you can also set nav in position:absolute , but that's not flex anymore ...

Thanks a lot, this works perfectly! – B.Mat Nov 03 '17 at 08:50 — B.Mat, Nov 03 '17 at 08:50

align-items: center and navigation

1 Answers1