为什么此徽标未在其 parent 容器内垂直居中？

Question

此页面中的徽标元素未在 <header> 容器中垂直居中。该问题在移动设备上比在桌面设备上更为明显。第二个元素 (#forum-link) 正确对齐。

flexbox align-items:center 规则似乎对一个 child div 有效，但对另一个无效。为什么会这样，您如何解决它？

  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>

编辑：澄清了问题

Answer 1

您需要指定 parents 的宽度以使其垂直居中。然后加上text-align: center;。如下更改 #logo 和 #forum-link 的样式。

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


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

我删除了你的边距，因为这里的预览非常小，你不会注意到元素是垂直居中的。随时将其放回您的源代码中。检查下面的代码

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>

Answer 2

嗯，我想这就是您想要的：徽标和 link 在背景上垂直居中？仅为 non-mobile 解决方案更新。

此外，正如我在评论中所说，为全面起见，在此重复：您的图片未垂直居中，因为它是 parents 的高度：#logo 和 header .

link 的高度比 header 小，所以它是垂直居中的。

如果您指的是 space 的 5px 左右，只需在 #logo 的图像上添加 display: block 即可删除该间距。不过，它仍将是其 parents 的高度。

我的解决方案基本上是给你的 body 一个高度，弯曲它，然后你的 header 垂直居中对齐。

 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>

Answer 3

只需在 body 中添加 margin: 0 :

  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>

为什么此徽标未在其 parent 容器内垂直居中？

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

html

css

responsive-design