Why is this logo not centering vertically within its parent container?

Question

The logo element in this page is not centering vertically within the <header> container. The problem is more pronounced on mobile than on desktop. The second element (#forum-link) is aligning correctly.

The flexbox align-items:center rule seems to work for one child div but not the other. Why is that the case and how do you fix it?

  html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height:116px;
}

#logo {
  margin-left: 15px;
}

#forum-link {
  max-width: 110px;
  margin-right: 35px;
}

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }

<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

EDIT: Clarified the question

@EternalHour how much explanation does "vertical alignment" require? Did you press "Run code snippet"? — Matthew S, Sep 03 '19 at 02:44
You're joking, right? I probably spent an hour making a mock website so that other users can clearly see the issue. There are other questions here asking about vertical alignment with no visual help whatsoever, like this one with 691 upvotes. https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div?rq=1 And you vote to have this question closed for "lack of clarity?" That's malicious voting done out of revenge and is against Stackoverflow's rules. — Matthew S, Sep 03 '19 at 03:04
add a `display: block;` to your `img` element inside `div#logo`, then the height of the image is the height of the `div#logo` and `header`, so there's no space to align it vertically centred as you did with the forum link. Check it out by inspecting your run code. The `header` element isn't vertically centred on the `body` because there's no CSS specifying it to do so. — bot19, Sep 03 '19 at 03:38

bot19 · Accepted Answer · 2019-09-03T03:50:42.957

1

Umm, I think this is what you're after: logo and link is vertically centred on the bg? Only updated for non-mobile solution.

Also, as I said in my comment, repeated here for comprehensiveness: your image isn't vertically centring because it's the height of its parents: the #logo and header.

The link has a smaller height than the header, so it's vertically centring.

If you're referring to the 5px or so of space, just throw a display: block on your #logo's image to remove that spacing. It will still be the height of its parents though.

My solution basically gives your body a height, flex it and your header aligns itself vertically centred.

 html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
  height: 116px;
  margin: 0;
  display: flex;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  width: 100%;
}

#logo {
  margin-left: 15px;
}

#logo img {
  display: block;
}

#forum-link {
  max-width: 110px;
  margin-right: 35px;
}

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }

<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

edited Sep 03 '19 at 03:50

answered Sep 03 '19 at 03:44

bot19

664
8
18

Adding `display: block;` to the image is not centering it – Matthew S Sep 03 '19 at 03:47
@KnocksX no, it removes the extra spacing under the image, allow it to be centred properly with other CSS styling. – bot19 Sep 03 '19 at 03:51
@KnocksX can you run my code and see if it looks the way you wanted it? I didn't describe all the styling I changed. There's 4-5 different CSS bits I added. If it looks the way you wanted, you can compare the 2 codes to see the difference. I did outline briefly what I did. And also explained why your image isn't centring = it's the same height as the header element. – bot19 Sep 03 '19 at 03:57
I see, didn't realize there were other changes. Is there a quick way to do a diffcheck here? – Matthew S Sep 03 '19 at 04:00
@KnocksX nope, but can use https://www.diffchecker.com/ you can also inspect my run code and see the changes in structure and work backwards. – bot19 Sep 03 '19 at 04:14
OK, reviewed and tested. Some of the elements you suggest removing or changing are the ones that make the responsive layout work. That's what makes the #forum-link div move below the flexbox and behave a certain way on mobile. Any fixes would have to take that existing code into account. I did implement two of your suggestions: add a fixed height of 116px to `
` and remove the bottom-margin from it. But the problem persists for now.
– Matthew S Sep 03 '19 at 04:17
@KnocksX the problem is I don't know what your responsive layout is meant to look like. Secondly, you can undo any styling via the media queries (if your original code was working fine responsively). Though it seems like you don't have a good grasp on CSS, maybe consult here for flex box stuff? https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Also, as for the actual questions you asked, it was answered. If you're asking the responsively stuff additionally, that's extending the scope which wasn't there - perhaps another question? If this answers your question(s), you should accept it :) – bot19 Sep 03 '19 at 04:31
@KnocksX also, have you been using the inspector of your browser's devTools to see how the styling affects element layouts? That will be useful. I basically just inspected your run code, removed some spacing and then added a bit of styling to make it look the way you described. – bot19 Sep 03 '19 at 04:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198855/discussion-between-bot19-and-knocks-x). – bot19 Sep 03 '19 at 04:40

JkAlombro · Answer 2 · 2019-09-03T05:35:26.160

You need to specify the width of your parents for it to center vertically. And then add text-align: center;. Change the styles of your #logo and #forum-link as below.

#logo {
    flex: 1;
    width: 50%;
    text-align: center;
}


#forum-link {
  max-width: 110px;
  flex: 1;
  width: 50%;
  text-align: center;
}

I removed your margins because the preview here is very small and you wont notice that the elements were centered vertically. Feel free to put it back in your source code. Check code below

html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}

#logo {
        flex: 1;
        width: 50%;
        text-align: center;
    }
    
    
    #forum-link {
      max-width: 110px;
      flex: 1;
      width: 50%;
      text-align: center;
    }

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }

<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

Thanks. Each element needs to be vertically centered, which means it has to be in the center of the parent div along the vertical axis. https://www.w3schools.com/howto/howto_css_center-vertical.asp — Matthew S, Sep 03 '19 at 03:38
@KnocksX the only reason why it appears not centered is because of the margins you put on your `#logo` and `#forum-link` styles. If you remove it, it should be okay. I edited my answer, try to run it. — JkAlombro, Sep 03 '19 at 03:42
@KnocksX I misunderstood your problem. Check my edited code above. Perhaps it will help. — JkAlombro, Sep 03 '19 at 05:36

score 0 · Answer 3 · answered Sep 03 '19 at 04:54

Just add margin: 0 in body :

  html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
  margin: 0;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height:116px;
}

#logo {
  margin-left: 15px;
}

#forum-link {
  max-width: 110px;
  margin-right: 35px;
}

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }

<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

Why is this logo not centering vertically within its parent container?

3 Answers3