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

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;
}