-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

内側divのsをdisplay: inline-blockに、外側のdivをに設定するとtext-align: center、問題が解決するはずです。

于 2012-10-08T16:38:50.703 に答える
0

宣言に幅を追加するdiv.centerか、宣言に追加text-align: centerしますdiv.center。

于 2012-10-08T16:38:27.263 に答える
0

display: inline-block;内側divのsとatext-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/

于 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 に答える