用左对齐项居中菜单
[英]Center a menu with left align items
问题描述
I need to design a menu, in which the menu is always centered, with variable number of items, browser resolutions, and the items would be aligned to the left (menu centered in the page, but items aligned to the left). 
我需要设计一个菜单，其中菜单始终居中，具有可变数量的项目，浏览器分辨率，并且项目将向左对齐（菜单位于页面中心，但项目向左对齐）。
(As you can see it is not centered at all). （如您所见，它根本没有居中）。
This is my code: 这是我的代码：
<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>
As you can see, the external div has 20% padding in order to center the items. 如您所见，外部div具有20％的填充以使项目居中。 Items float to the left. 物品向左浮动。 Items are not centered at all because a remaining space exists in which item4 doesn't have enough space, so it floats to the next line. 项根本不居中，因为存在剩余空间，其中item4没有足够的空间，因此它浮动到下一行。
And if the menu would have only one menu item, this item float to left so is more obvious that the menu is not centered. 而且，如果菜单中只有一个菜单项，则该项目会向左浮动，因此很明显菜单没有居中。 If I try to use some style to center all the items (text-align or something like this), item4 would appear centered below item2, and I need that the items are align to left. 如果我尝试使用某种样式将所有项目居中（文本对齐或类似的内容），则item4将出现在item2下方的中心位置，并且我需要将这些项目向左对齐。
I need: 我需要：
- Menu to be centered in the page, with any number of items 菜单将位于页面中心，可包含任意数量的项目
- Items centered 物品居中
- Cross-browser compatibility (to IE8 at least, and mobile explorers) 跨浏览器兼容性（至少与IE8和移动浏览器兼容）
- No JavaScript 没有JavaScript
4 个解决方案
解决方案1
0 2013-07-21 20:15:14
Try using display: inline-block; 尝试使用display: inline-block; . 。
You can add the following code: 您可以添加以下代码：
.extPanel {
text-align: center;
}
.menuElement {
display: inline-block;
*display: inline; //ie
zoom: 1; //ie
//remove float: left;
}
解决方案2
0 2013-07-21 20:50:29
instead padding, you could simply use margin and inline-block for childs. 取而代之的是填充，您可以简单地为孩子使用margin和inline-block 。
http://codepen.io/anon/pen/quByg 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;
}
解决方案3
0 2013-07-22 04:45:24
You want to set text-align: center; 您要设置text-align: center; on the surrounding body. 在周围的身体上。 Then .extPanel needs a margin: 0 auto; 然后.extPanel需要一个margin: 0 auto;
http://jsfiddle.net/markdelorey/ttZgZ/ http://jsfiddle.net/markdelorey/ttZgZ/
解决方案4
0 2013-07-22 10:26:18
I found the solution by combining all your answers. 我通过结合所有答案找到了解决方案。
You can found it here: http://codepen.io/anon/pen/odhrp 您可以在这里找到它： http : //codepen.io/anon/pen/odhrp
I used diffent IE hack here: http://codepen.io/anon/pen/flEsm 我在这里使用了不同的IE hack： http : //codepen.io/anon/pen/flEsm
As you can see, works with one element, two, three... When items menu don't fit in extPanel max width, items goes to next line, align to left, and menu is still centered. 如您所见，可以使用一个，两个，三个元素...当项目菜单不适合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;
}
And text-justify: distribute solve the problem with text-align: justify in IE. 文本对齐：在IE中使用文本对齐来解决问题：对齐。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.