Question

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

http://i39.tinypic.com/2vx0ha9.jpg

（你可以看到它根本没有居中）。

这是我的代码：

<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没有足够的空间，因此它会浮动到下一行。

如果菜单只有一个菜单项，则此项向左浮动，因此菜单不居中更为明显。如果我尝试使用某种样式来居中所有项目（text-align或类似的东西），item4将显示在item2下方的中心，我需要将项目对齐到左边。

我需要：

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

Answer 1

尝试使用display: inline-block;。

您可以添加以下代码：

.extPanel {
    text-align: center;
}
.menuElement {
    display: inline-block;
    *display: inline; //ie
    zoom: 1; //ie
    //remove float: left;
}

Answer 2

代替填充，您可以简单地将margin和inline-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;
    }

Answer 3

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

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

Answer 4

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

你可以在这里找到它： 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在IE中使用text-align：justify解决问题。

使用左对齐项目居中的菜单

4 个答案: