Question

我试过这个：

代码：

<div class="center">
    <div class="mainmenuoption">Home</div>
    <div class="mainmenuoption">About Us</div>
    <div class="mainmenuoption">Experiences</div>
    <div class="mainmenuoption">Get Involved</div>
    <div class="mainmenuoption">Support Us</div>
    <div class="mainmenuoption">Contact Us</div>
</div>

CSS：

div.center
{
    display: block;   
    margin-left: auto;   
    margin-right: auto;
}

div.mainmenuoption
{
    float: left;
    font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    width: 100px;
    color: #FFFF00;
    text-align: center;
    vertical-align: middle;
}

Answer 1

将内部div设置为display: inline-block，将外部div设置为text-align: center，它应该可以解决您的问题。

Answer 2

为div.center声明添加宽度，或在text-align: center声明中添加div.center。

Answer 3

将display: inline-block;提供给内部div，将text-align: center;提供给父div。

<div class="center">
    <div class="mainmenuoption">Home</div>
    <div class="mainmenuoption">About Us</div>
    <div class="mainmenuoption">Experiences</div>
    <div class="mainmenuoption">Get Involved</div>
    <div class="mainmenuoption">Support Us</div>
    <div class="mainmenuoption">Contact Us</div>
</div>

CSS：

div.center
{
    text-align: center;
}

div.mainmenuoption
{
    font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    width: 100px;
    color: #FFFF00;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

演示：http://jsfiddle.net/8Y8YW/

Answer 4

如果你想使菜单居中（班级.center），那么你可以使用

.center 
{
     width:600px;   // what ever width you want
     margin: auto 0;
}

或者您希望使菜单项居中使用text-align: center

Answer 5

如果在div.center中设置宽度，它应该可以工作！我在http://jsfiddle.net/EFXXs/2/

发布了一个样本

Answer 6

除非您在div上设置明确的宽度，否则它将展开以占用可用宽度。既然你似乎知道你想要多宽一点，那就可以了：

div.center {
    width: 600px;
    margin: 0 auto;
}

如果div可能具有可变宽度，请使用{MADra Uchiha建议的display: inline-block。

如何使用<div> </div>居中菜单

6 个答案:

CSS：

演示：http://jsfiddle.net/8Y8YW/