-1

我试过这个：

代码：

<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;
}
4

6 回答 6

1

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

于 2012-10-08T16:38:50.703 回答
0

给display: inline-block;inner divs 和 atext-align: center;给 parent 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/

于 2012-10-08T16:41:34.237 回答
0

如果您想将菜单（类.center）居中，则可以使用

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

或者您想将菜单项使用居中text-align: center

于 2012-10-08T16:41:39.533 回答
0

如果您在 div.center 中设置宽度，它应该可以工作！我在以下位置发布了一个示例：http: //jsfiddle.net/EFXXs/2/

于 2012-10-08T16:42:25.220 回答
0

除非您在您的设备上设置明确的宽度，div否则它将扩展以占用可用宽度。既然你似乎知道你想要它有多宽，这将起作用：

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

如果div可能是可变宽度，请display: inline-block按照宇智波斑的建议使用。

于 2012-10-08T16:42:32.427 回答
0

为您的声明添加宽度div.center或添加text-align: center到您的div.center声明中。

于 2012-10-08T16:38:27.263 回答