中心與左對齊項目

菜單我需要設計一個菜單，在菜單總是集中在與項目，瀏覽器分辨率的變量數量，以及項目將左對齊（菜單頁面居中，但項目與左側對齊）。中心與左對齊項目

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

中心與左對齊項目

回答

相關問題