Flex nav ul bar 不在 768px 和更小的屏幕上居中答案

【问题标题】：Flex nav ul bar not centerd on 768px screens and smallerFlex nav ul bar 不在 768px 和更小的屏幕上居中
【发布时间】：2019-10-20 09:59:09
【问题描述】：

我不明白为什么导航栏不会在较小的屏幕上居中。

我认为这与 nav ul 家附近的空间有关（以及我缺乏弹性知识）。

这是一支笔，你可以用它来缩小窗口，看看家旁边的左边空间不会变小，并使水平导航栏不居中。

#header-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  border: solid black;
  flex: 1;
  background-image: url(fresh-snow.png);
  background-color: #480459;
  color: white;
}

nav {
  border: solid;
  display: flex;
  flex: 4;
}

nav ul {
  border: solid;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  flex: 1;
  justify-content: space-evenly;
}

<div id="header-wrapper">
  <hgroup>
    <h1>Marina Heide</h1>
    <h2>Översättare</h2>
    <h3>från svenska, norska, danska till franska</h3>
  </hgroup>
  <nav>
    <ul class="navigation">
      <li><a href="#">home</a></li>
      <li><a href="#">kontakta mig</a></li>
      <li><a href="#">vem jag är</a></li>
    </ul>
  </nav>
</div>
<div id="main"> .
  <p>Jag översätter böcker, webbsidor, serier och filmer.
    <p>
</div>

https://codepen.io/cykelcykel/pen/eYYBMpq

当 flex-direction 设置为 column 时，我希望导航栏居中。

【问题讨论】：

您的 HTML 无效。 <div> 可能不是 <ul> 的子代。先解决这个问题。
抱歉，我的导航代码与 W3 的下拉菜单代码不匹配。我已经删除了。我在 ul 中添加了一个 0 的填充，看起来我已经修复了列表问题。我做对了吗？

标签： html css flexbox

【解决方案1】：

元素ul class naviation的左侧有一个40px的内边距。在更大的屏幕上，40px 几乎可以忽略不计。所以看起来导航栏是中心对齐的。但是如果你仔细观察，你会发现导航栏在右侧稍微有点小。添加以下代码以取消左侧填充。

nav ul {
    border: solid;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    flex: 1;
    justify-content: space-evenly;
    padding-left: 0;
}

Codepen：https://codepen.io/ashfaq_haq/pen/VwwmEdv

【讨论】：

【解决方案2】：

在@media only screen and (max-width: 768px) #header-wrapper 你应该添加行align-items: center;

例如https://jsfiddle.net/6oaj2c3q/

【讨论】：