我正在尝试使页面响应。使用两个简单的 div 作为 Logo 效果很好。 Logo 也会调整大小。对于我想创建的菜单，只有这个是一个列表，我发现很难将按钮居中。我已经走到这一步了，但它并没有像我想要的那样居中对齐。仅当它是最小屏幕尺寸时。
@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>最佳答案
您可以为您的 li 使用 display:inline-block 然后它以 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;
}
关于css - 响应居中的菜单，而菜单按钮也需要调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27207582/