时间戳

首页 > 解决方案 > 如何将 iPhone 和所有网络浏览器的 CSS 菜单居中

css - 如何将 iPhone 和所有网络浏览器的 CSS 菜单居中

问题描述

我为我的网站使用 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）上，菜单会换行为两行。问题是它们没有在屏幕上居中。

标签： cssmenu

解决方案

创建一个容器并：

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

推荐阅读