将带有左对齐项目的菜单居中答案

【问题标题】：Center a menu with left align items将带有左对齐项目的菜单居中
【发布时间】：2023-04-04 01:46:01
【问题描述】：

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

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

这是我的代码：

<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

【问题讨论】：

标签： css menu center

【解决方案1】：

尝试使用display: inline-block;。

可以添加如下代码：

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

【讨论】：

但 item4 也居中，我需要它左对齐：codepen.io/anon/full/ziyJK

【解决方案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;
    }

【讨论】：

您的答案的问题是 item4，出现在中间，我需要它向左对齐。我需要完整的菜单位于页面中心，但项目向左对齐。
它可以是 : 或 text-align:center 或 text-align:left;或文本对齐：对齐？ codepen.io/anon/pen/nuvlw 你最喜欢哪一个？
除非 container 和 itemm 具有固定的宽度，否则您想要的仅通过 CSS 是不可能的，那么您可以使用类似 .menuElement:nth-child(4) {float:left;} .. in如果你知道容器每行只能容纳 3 个项目。那么，在这个图中，一旦你拿到第 6/7 个项目，问题就会再次出现:(
对不起，我之前的评论有误。如果您只有一个菜单项，则它不会在页面中居中 (codepen.io/anon/pen/LirHd)。我需要如果有一个菜单项结果是这样的：codepen.io/anon/pen/JBEio 如果有两个这样的：codepen.io/anon/pen/deEbG 如果有三个这样的：codepen.io/anon/pen/Lobxp 如果有四个这样的：codepen.io/anon/pen/qynHB。我需要整个菜单以页面为中心，但是，如果项目没有足够的空间并且需要浮动到下一行，则 elementos 向左对齐......我认为这很复杂（可能不可能......）
有趣，看起来我们最后的 cmets 在时间线上搞混了 :)

【解决方案3】：

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

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

【讨论】：

正如您在小提琴中看到的，菜单根本没有居中。背景颜色可以看出这个问题，右边的灰边比左边的多。

【解决方案4】：

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

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

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

如您所见，使用一个元素、两个、三个... >

.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 中解决问题。

【讨论】：