我正在尝试使菜单居中对齐

Question

我是 CSS 的新手。我通过玩 WordPress 主题的代码来学习。 上次我发布了这个问题，但我感染了新冠病毒并住院了两个多星期。我删除了旧问题并将最初的问题分成两部分。这是第一部分。

删除左侧的站点名称。我使用了 display: none。

<div id="header-left">
    
    <div id="hgroup" class="logo-disable">
        <h1 id="site-title">
            <a href="https://wp-themes.com/catch-kathmandu/" title="Catch Kathmandu" rel="home">Catch Kathmandu</a>
        </h1>
        <h2 id="site-description"> Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any devices.</h2>
    </div><!-- #hgroup -->
</div>


#header-left {
-webkit-text-size-adjust: 100%;
color: #404040;
line-height: 1.8;
text-rendering: optimizeLegibility;
word-wrap: break-word;
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
float: left;
max-width: 100%;
display: none;
} 

将右侧的菜单居中对齐。

<div id="header-right" class="header-sidebar widget-area">
                    <aside class="widget widget_nav_menu">
                        <div id="primary-menu-wrapper" class="menu-wrapper">
        <div class="menu-toggle-wrapper">
            <button id="menu-toggle" class="menu-toggle" aria-controls="main-menu" aria-expanded="false"><span class="menu-label">Menu</span></button>
        </div><!-- .menu-toggle-wrapper -->

        <div class="menu-inside-wrapper">
            <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu" aria-expanded="false">
            <ul id="menu-primary-items" class="menu nav-menu"><li class="current-menu-item"><a href="https://wp-themes.com/catch-kathmandu/">Home</a></li><li class="page_item page-item-2"><a href="https://wp-themes.com/catch-kathmandu/?page_id=2">About</a></li><li class="page_item page-item-182"><a href="https://wp-themes.com/catch-kathmandu/?page_id=182">Home</a></li><li class="page_item page-item-46 page_item_has_children" aria-haspopup="true"><a href="https://wp-themes.com/catch-kathmandu/?page_id=46">Parent Page</a><button class="dropdown-toggle" aria-expanded="false"><span class="screen-reader-text">expand child menu</span></button><ul class="children"><li class="page_item page-item-49"><a href="https://wp-themes.com/catch-kathmandu/?page_id=49">Sub-page</a></li></ul></li></ul>                </nav><!-- .main-navigation -->
        </div>


#header-right {
-webkit-text-size-adjust: 100%;
color: #404040;
line-height: 1.8;
text-rendering: optimizeLegibility;
word-wrap: break-word;
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
padding-top: 50px;
float: right;
margin-right: 33%;
}

我通过将右边距从 50% 减少到 33% 来达到我的中心对齐。虽然甜蜜点在 32% 到 33% 之间。

我还尝试将菜单与像素居中对齐（margin-right :400px）。

当我减小屏幕尺寸时，两种方法之间的差异是显而易见的。 33% 大部分保持居中对齐，但 px 会随着屏幕的变化而改变菜单的位置。

还有其他方法可以使菜单居中吗？

Answer 1

根据方块类型，有很多方法可以使物品居中。

您可以在 parent 上使用 display flex，然后添加 justify-content: center 以使页面上的子项水平居中，请参阅flex axis - in basic concepts of flex 了解更多信息。

然后您可以在子级上使用 flex 属性，并可以向该属性添加一个数字来告诉 CSS 子级将占用多少父级宽度。

例如，如果我将两个子元素都设置为flex: 1，它们将占用50%，如果三个子元素都带有flex: 1，然后，他们将占据父母宽度的 33%。我也可以在 flex 属性上放置 percentage => .header set flex: 60% 和 .nav-parent set flex: 40% ，然后它们将占据父宽度的设定百分比。

此外，我还可以将display: flex 属性添加到子元素 以进一步居中它们的内容，就像我在.nav-parent 的子类.menu 上所做的那样。然后可以使用 flex、justify-content 和 align-items 的轴居中属性进一步对齐和居中。好消息是这些属性是动态的，因为它们也可以缩放以适应浏览器的大小。

.nav-section {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  align-items: center;
  padding: 1rem;
}

.header h1 {  
  line-height: 1px;
}

.header {  
  flex: 60%;
}

.nav-parent {
  flex: 40%;
}

.header span {
  font-size: .8rem;
  font-weight: 100;
  font-style: italic;
}

ul li {
  list-style: none;
}

ul li ~ li {
  margin-left: .5rem;
}

.btn {
  flex: 1;
  padding: .5rem 0;
  text-align: center;
}

.menu {
  display: flex;
  justify-content: center;
  color: #555;
  font-size: .8rem; 
}

.active {
  background: skyblue;
}

<div class="nav-section">
  <div class="header">
    <h1>Catch Kathmandu</h1>
    <span>Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any device.</span>
  </div>
  <div class="nav-parent">
    <ul class="menu">
      <li class="home active btn">Home</li>
      <li class="about btn">About</li>
      <li class="contact btn">Contact</li>
      <li class="parent btn">Page</li>
    </ul>
  </div>

</div>

Answer 2

还有其他方法可以使菜单居中吗？

有很多方法可以使菜单居中。

如果您的菜单是具有显式声明width 的块级元素，那么最基本的技术之一是将关键字auto 应用于margin-right 和margin-left：

.my-menu {
  margin-top: 12px;     // <= Just an example, you can use any value
  margin-right: auto;
  margin-bottom: 12px;  // <= Just an example, you can use any value
  margin-left: auto;
}

这四个声明的 CSS 简写是：

.my-menu {
  margin: 12px auto 12px auto;
}

或者，由于垂直和水平值相同，您可以声明：

.my-menu {
  margin: 12px auto;
}

---

工作示例：

.my-menu {
 display: block;
 margin: 12px auto;
}

.my-menu.vertical {
   width: 100px;
}

.my-menu.horizontal {
   width: 396px;
   padding: 0;
}

.my-menu.horizontal li {
  display: inline-block;
  padding: 0 6px;
}

.my-menu.horizontal li::before {
  content: '•';
  display: inline-block;
  padding-right: 6px;
  font-size: 20px;
}
 

<ul class="my-menu vertical">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<ul class="my-menu horizontal">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>