中心与左对齐项目

菜单我需要设计一个菜单，在菜单总是集中在与项目，浏览器分辨率的变量数量，以及项目将左对齐（菜单页面居中，但项目与左侧对齐）。中心与左对齐项目

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没有足够空间的位置，所以它漂浮到下一行。

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

我需要：

菜单页面居中，用任何数量的项目
项目中心
跨浏览器兼容（以IE8至少，和移动探险家）
否JavaScript

来源

2013-07-21 CarlosTI

尝试使用display: inline-block;。

您可以添加以下代码：

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

来源

2013-07-21 20:15:14 Chad

但ITEM4也居中，我需要将其调整到左： http://codepen.io/anon/full/ziyJK – CarlosTI

，而不是填充，你可以简单地使用孩子的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; 
    }

来源

2013-07-21 20:50:29

你的答案的问题是，ITEM4，出现在中间，我需要将其调整向左。我需要完整的菜单位于页面的中心，但项目对齐左侧。 – CarlosTI

它可以是：或文本对齐：center或text-align：left;或文本对齐：证明？ http://codepen.io/anon/pen/nuvlw你最喜欢哪一个？ –

oki完美，我想你已经够清楚了。 –

你要设置text-align: center;对周围体。然后.extPanel需要margin: 0 auto;

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

来源

2013-07-22 04:45:24 mdelorey

正如你可以在小提琴中看到的，菜单根本不居中。背景颜色可以看到这个问题，它的右边比左边有更多的灰色边缘。 – CarlosTI

我发现所有的答案相结合的解决方案。

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

我用diffent IE黑客在这里： http://codepen.io/anon/pen/flEsm

正如你所看到的，一个元素，两个，三个......当项目菜单别工程t适合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：在IE中使用text-align：justify解决问题。

来源

2013-07-22 10:26:18 CarlosTI

中心与左对齐项目

回答

相关问题