【问题标题】：Responsive centered menu while the menu buttons need tot resize too响应式居中菜单，同时菜单按钮也需要调整大小
【发布时间】：2015-01-28 05:31:16
【问题描述】：

我正在尝试使页面具有响应性。使用两个简单的 div 作为徽标效果很好。徽标也会调整大小。对于我想创建相同的菜单，只有这是一个列表，我发现很难将按钮居中。我走了这么远，但它不像我想要的那样居中对齐。仅当它是最小屏幕尺寸时。

@charset"UTF-8";

/* CSS Document */

/*Algemeen*/

#wrapper {
  width: 100%;
  height: 100%;
  margin: 0px auto;
}
header {
  padding-bottom: 8%;
  width: 100%;
  height: auto;
  background-color: #88d9ce;
}
#logo {
  text-align: center;
  padding-top: 10px;
}
#logo img {
  min-width: 100px;
  max-width: 15%;
  height: auto;
}
#menu {
  text-align: center;
  margin-left: -25px;
  width: 100%;
}
ul {
  list-style-type: none;
}
li {
  float: left;
  width: 17%;
  height: auto;
  margin-right: 3%;
}
li img {
  min-width: 60px;
  max-width: 50%;
  height: auto;
}

<body>
  <div id="wrapper">
    <header>
      <div id="logo">
        <img src="http://i61.tinypic.com/13yebnr.jpg" />
      </div>
      <div id="menu">
        <ul>
          <li>
            <img src="http://i60.tinypic.com/5f0pd4.png" />
          </li>
          <li>
            <img src="http://i59.tinypic.com/2cx6xqs.png" />
          </li>
          <li>
            <img src="http://i58.tinypic.com/veu6o1.png" />
          </li>
          <li>
            <img src="http://i61.tinypic.com/24ebywg.png" />
          </li>
          <li>
            <img src="http://i62.tinypic.com/71r8ut.png" />
          </li>
        </ul>
      </div>
    </header>
  </div>
</body>

【问题讨论】：

查看此链接以获取帮助 learnlayout.com 您尚未提供工作的 jsfiddle 或我们可以看到的图像。社区随时为您提供帮助，但您需要提供尽可能多的详细信息。
我将制作一个 jsfiddle 来展示它的外观。感谢您的提示！
把你的其他代码放回去，这样它就不会被否决。小提琴和问题中的代码是首选的提问方式。

标签： css responsive-design menu center

【解决方案1】：

您可以将display:inline-block 用作您的li，然后它以text-align:center 为中心。 ul 上的 font-size:0px 是为了消除发生的额外间距。如果您在该列表项中有文本，请将字体大小放在上面。

演示：https://jsbin.com/xudaz/1/

   <div id="logo">
      <img src="http://placehold.it/300x100/000000/FFFFFF&text=LOGO" />
    </div>
   
    <ul id="menu">
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=1"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=2"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=3"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=4"/></li>
       <li><img src="http://placehold.it/60/B7AF90/FFFFFF&text=5"/></li>
    </ul>

CSS：

#logo {
    text-align:center;
    padding-top:10px;
}
#logo img {
    min-width:100px;
    max-width:15%;
    height:auto;
}

#menu {
    list-style-type:none;
    padding:0;
    font-size:0px;
    white-space:nowrap;
    min-width:240px;
    text-align:center;
    width:100%;
    max-width:980px;
    margin:0 auto;
}
#menu li {
    display:inline-block;
    box-sizing:border-box;
    border:1px solid red;
    width:17%;
}
#menu li img {
    height:auto;
    width:100%;
    max-width:60px;
}

【讨论】：

非常感谢您对我的帮助！我尝试将您的代码应用于我的代码，但我发现它没有居中，我认为必须根据宽度调整大小的菜单按钮导致问题..jsbin.com/fazirolubo
它以 Bin 为中心，仔细看我已经删除了#menu div 并将样式放在 ul 上，你还有负边距和我删除的各种其他样式。
是的！我将菜单 div 编辑为 al ul id，它起作用了！非常感谢！ :)
酷。也必须移除 li 上的浮动（因为浮动只向左或向右移动）。请接受这个作为答案。

【解决方案2】：

这是另一个“答案”，因为它根本不使用图像。您会发现用于导航的图像，除非它们是两倍大小，否则在高密度（视网膜）设备上看起来会很模糊。此外，在小视口上将链接缩小到太小很难点击，因为手指有点胖。这样叠加更好。

演示：https://jsbin.com/fafeya/1/

CSS

body,
html {
    background: #88d9ce;
    padding: 0;
    margin: 0;
}
.logo {
    width: 100px;
    height: 100px;
    background: yellow;
    margin: 3% auto;
    border-radius: 50%;
    box-sizing:border-box;
    border:5px solid #000;
}
#nav {
    text-align: center
}
#nav a {
    background: #9cf2e6;
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-size:14px;
    font-family:monospace; /* see google fonts too or typekit etc */
    padding: 5px 20px 3px;
    box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.5);
    transform: rotate(2deg) skew(2deg);
    margin: 5px 3%;
}
#nav a span {
    transform: rotate(-2deg) skew(-2deg);
    display: block;
}
#nav a:nth-child(even) {
    transform: rotate(-2deg) skew(-2deg)
}
#nav a:nth-child(even) span {
    transform: rotate(2deg) skew(2deg)
}

HTML：

<div class="logo"></div>
  
  
<nav id="nav">
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
  <a href="#"><span>Link</span></a>
</nav>

【讨论】：