DEMO：https://jsbin.com/fafeya/1/

Question

首先，我很抱歉我缺乏html和css技能。我对此很陌生，这就是我遇到以下问题的原因：

我正在努力使页面响应。用两个简单的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>

Answer 1

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

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

Answer 2

这是一个替代的“答案”，因为它根本不使用图像。你会发现用于导航的图像，除非它们是两倍大小，在高密度（视网膜）设备上看起来会模糊。此外，由于手指有点胖，很难在小视口上调整太小的链接。这堆栈更好。

DEMO：https://jsbin.com/fafeya/1/

enter image description here

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

响应中心菜单，而菜单按钮也需要调整大小

2 个答案:

DEMO：https://jsbin.com/xudaz/1/

DEMO：https://jsbin.com/fafeya/1/