Question

我在网站上使用css菜单，并且在使用MacBook，不同iPhone的iPad时，菜单会四处移动，因此有时它们不在屏幕中央。此刻，如果屏幕较小，菜单确实会环绕形成两层菜单，但它们不会在屏幕上居中。我对当前代码有些困惑，无论在什么屏幕上查看，都需要更改以确保菜单项始终居中。由于我不是专业编码人员，所以可以提供任何帮助。

这里有六个菜单，三个菜单带有子菜单，三个菜单带有直接页面链接。

<!-- Start css3menu.com BODY section -->
<ul  id="css3menu0"  class="topmenu">
    <li  class="topfirst"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu1</span></a>
        <ul  style="width: 145px;">
              <li><a  href="subpage1a.html">subMenu1a </a></li>
              <li><a  href="subpage1b.html">subMenu1b </a></li>
            </ul>
          </li>
          <li  class="topmenu"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu2</span></a>
            <ul  style="width: 145px;">
              <li><a  href="subpage2a.html"> subMenu2a</a></li>
              <li><a  href="subpage2b.html"> subMenu2b</a></li>
              <li><a  href="subpage2c.html"> subMenu2c</a></li>
              <li><a  href="subpage2d.html"> subMenu2d</a></li>
            </ul>
          </li>
          <li  class="topmenu"><a  href="page3.html"  style="width: 130px; height: 15px; line-height: 15px;">Menu3</a></li>
          <li  class="topmenu"><a  href="#"  style="width: 130px; height: 15px; line-height: 15px;"><span>Menu4</span></a>
          <ul  style="width: 145px;">
              <li><a  href="subpage4a.html"> subMenu4a</a></li>
              <li><a  href="subpage4b.html"> subMenu4b</li>
              <li><a  href="subpage4c.html"> subMenu4c</a></li>
          </ul>
     </li>
     <li  class="topmenu"><a  target="_blank"  href="https://www.instagram.com/xxx/" style="width: 130px; height: 15px; line-height: 15px;">Instagram</a></li>
     <li  class="toplast"><a  href="page6.html"  style="width: 130px; height: 15px; line-height: 15px;">Menu6</a></li>
</ul>
<p  class="_css3m"><a  href="http://css3menu.com/">Creating CSS Menu Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->

此刻，菜单的位置根据屏幕宽度的变化而变化，而在较小的屏幕（例如iPhone）上，菜单将分为两行。问题在于它们不在屏幕上居中。

Answer 1

创建一个容器，然后：

.container{
display: flex;
justify-content: center;
}

如何将iPhone和所有Web浏览器的CSS菜单居中

1 个答案: