无法在 div 中居中 CSS 列表菜单答案

【问题标题】：Trouble centering a CSS list menu within a div无法在 div 中居中 CSS 列表菜单
【发布时间】：2018-08-25 09:57:48
【问题描述】：

我对@987654322@ 的相对基本知识正在碰壁。我已经将一个菜单放在一起，目的是在它的 div 中居中。无论出于何种原因，所有以CSS （margin 0 & set width for the menu's ID）为中心的尝试都失败了，所以我不得不将 div 的宽度更改为勉强适合所有菜单选项并将其集中在页面上。

但是，这导致它在几个浏览器（主要是 Safari）中显示不正确。

这是 CSS：

#primary_nav_wrap {
  display: block;
}

#primary_nav_wrap ul {
  list-style: none;
  text-align: center;
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul a {
  display: block;
  margin: 0 auto;
  color: #8a7e70;
  text-decoration: none;
  font-size: 13.9pt;
  padding: 0 10px;
  letter-spacing: 2px;
  font-family: Engravers;
}

#primary_nav_wrap ul li {
  display: inline;
  position: relative;
  float: left;
  padding: 0
}

#primary_nav_wrap ul ul {
  display: none;
  width: 204px;
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(0, 0, 0, 0.92);
  margin-left: -100px
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 204px
}

#primary_nav_wrap ul ul a {
  font-family: Eavesregular;
  font-size: 12pt;
  letter-spacing: .5px !important;
  line-height: 120%;
  padding: 5px 5px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

a:hover,
a:active,
li:hover,
li:active,
ul:hover,
ul:active {
  color: #bfb3a0 !important;
}

和我的 HTML

<div id="primary_nav_wrap">
  <ul>
    <li><a href="/wild/philosophy"><span style="color:#fffdf2;">philosophy</span></a></li>
    <li><a href="/wild/shadesofblack">collection</a>
      <ul>
        <li><a href="/wild/shadesofblack">Shades of Black</a></li>
        <li><a href="/wild/lamourdusauvage">L' Amour du Sauvage</a></li>
        <li><a href="/wild/darkphoenix">Dark Phoenix</a></li>
        <li><a href="/wild/buy">Buy the Collections</a></li>
      </ul>
    </li>
    <li><a href="/wild/grandcentral">fashionshow</a>
      <ul>
        <li><a href="/wild/grandcentral">Phoenix New York<br />Grand Central Station</a></li>
      </ul>
    </li>
    <li><a href="/wild/press">press</a>
    </li>
    <li><a href="/wild/blog">blog</a></li>
    <li><a class="lastcontact" href="/wild/contact">contact</a></li>
  </ul>
</div>

这是网站：

https://christianpersi.co/wild/

感谢您的所有帮助！

【问题讨论】：

你的html 代码在哪里
@Bhargav 刚刚添加了它。谢谢！
您需要哪种类型的输出？
@Bhargav 我需要一个以全角 div 为中心的菜单，以便在所有浏览器中正确显示。
您的html 代码中使用的#primary_nav_wrap id 在哪里......？

标签： html css list menu center

【解决方案1】：

看看使用flex 来定位您的元素。

默认情况下 flex 会连续渲染你的项目，你可以设置 justify-content: center;将所有内容与间距对齐。您可以将中心放在菜单的父级上，并在菜单的 ul 内部 justify-content: space-between;将它们均匀地隔开，但正如@Bhargav 指出的那样，您的问题可能是您的菜单中的字符数量减少了限制宽度的布局。

【讨论】：