0

我需要设计一个菜单，其中菜单始终居中，具有可变数量的项目、浏览器分辨率，并且项目将左对齐（菜单在页面中居中，但项目左对齐）。

（如您所见，它根本没有居中）。

这是我的代码：

<html>
<head>

<style type="text/css">

.extPanel{
 background-color:#555;
 padding: 0px 20% 0px 20%;
 display: table;
}

.split{
    clear: both;
}

.menuElement{
 float:left;
 background-color:#aaa;
 margin: 0px 20px 20px 0px;
 width: 200px;
 height: 200px;
 text-align: center;
}

</style>

</head>
<body>

<div class="extPanel">

    <div class="menuElement">item1</div>
    <div class="menuElement">item2</div>
    <div class="menuElement">item3</div>
    <div class="menuElement">item4</div>

    <div class="split"></div>
    External Panel. 20% left and right padding.
</div>

</body>
</html>

如您所见，外部 div 有 20% 的填充以使项目居中。项目向左浮动。项目根本不居中，因为存在剩余空间，其中 item4 没有足够的空间，所以它浮动到下一行。

如果菜单只有一个菜单项，则此项向左浮动，因此菜单未居中更明显。如果我尝试使用某种样式将所有项目居中（文本对齐或类似的东西），项目 4 将出现在项目 2 下方居中，我需要项目向左对齐。

我需要：

  • 位于页面中心的菜单，包含任意数量的项目
  • 项目居中
  • 跨浏览器兼容性（至少到 IE8 和移动浏览器）
  • 没有 JavaScript
4

4 回答 4

0

我通过结合您的所有答案找到了解决方案。

你可以在这里找到它：http: //codepen.io/anon/pen/odhrp

我在这里使用了不同的 IE hack：http: //codepen.io/anon/pen/flEsm

如您所见，适用于一个元素，两个，三个......当项目菜单不适合 extPanel 最大宽度时，项目转到下一行，左对齐，菜单仍然居中。

.extPanel {  
   background-color:#555;
  text-align:center;
  display: table;   
  margin: auto;
  max-width: 80%;
  text-align: justify;
}
.menuElement {
  display:inline-block;
  width:200px;
  height:200px;
  margin:20px 20px 0;
  border:solid;
  text-align: center;
}

和 text-justify:distribute 用 text-align:justify 在 IE 中解决问题。

于 2013-07-22T10:26:18.320 回答
0

而不是填充，您可以简单地将marginandinline-block用于儿童。

http://codepen.io/anon/pen/quByg

 .extPanel {
      margin:0 20%;
text-align:justify;
    }
    .menuElement {
      display:inline-block;
      width:200px;
      height:200px;
      margin:0 20px 20px 0;
      border:solid;
    }
于 2013-07-21T20:50:29.570 回答
0

你想设置text-align: center;在周围的身体上。然后.extPanel需要一个margin: 0 auto;

http://jsfiddle.net/markdelorey/ttZgZ/

于 2013-07-22T04:45:24.263 回答
0

尝试使用display: inline-block;.

您可以添加以下代码：

.extPanel {
    text-align: center;
}
.menuElement {
    display: inline-block;
    *display: inline; //ie
    zoom: 1; //ie
    //remove float: left;
}
于 2013-07-21T20:15:14.030 回答