我正在尝试居中对齐菜单

Question

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

删除左侧的站点名称。我使用了显示：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%;
}

我通过将 margin-right 从 50% 减少到 33% 来达到我的居中对齐。虽然甜蜜点在 32% 到 33% 之间。

我也试过用像素居中对齐菜单（右边距：400px）。

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

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

Answer 1

Is there any other way I could center the menu?

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

如果您的菜单是块级元素并明确声明了 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;
}

这四个声明的CSSshorthand是：

.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>

Answer 2

有很多方法可以根据项目的方块类型将项目居中。

您可以在 parent 上使用 display flex 然后添加a justify-content: center 使 children 项目在页面上水平居中，有关详细信息，请参阅 flex axis - in basic concepts of flex。

然后你可以在 children 上使用 flex 属性并可以添加一个数字属性告诉 CSS child 将占用 parent 宽度的多少。

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

此外，我还可以将 display: flex 属性添加到 child 元素 以及进一步居中它们的内容，就像我在 .menuclass这是.nav-parent的child。然后可以使用 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>

我正在尝试居中对齐菜单

I am trying to center align the menu

css

center

centering