0

センタリングされていないサイトにメニューバーがあります。text-align:center をどこでも試してみて、マージンと位置をいじりましたが、画面サイズに関係なく、テキストをメイン タイトルに揃えることができないようです。見てみませんか？

http://jsfiddle.net/9sqkL/

                <title>Test</title>
                <link rel="stylesheet" type="text/css" href="style.css">
                <link href='http://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
      </head>

      <body>
             <h1 style="text-align: center;">Test</h1>

      <div>
                <ul id="nav">
                <li ><a href="#" style="color:rgb(56,162,188);">HOME</a></li>
                <li ><a href="#" style="color:rgb(123,176,26);">PROJECTS</a></li>
                <li ><a href="#" style="color:rgb(243,45,93);">RESUME</a></li>
                <li ><a href="#" style="color:rgb(234,49,20);">CONTACT</a></li>
                <li ><a href="#" style="color:rgb(237,103,14);">ABOUT</a></li>
      </ul>
      </div>

CSS:

h1, h2, h3, h4, h5, h6 {
      color: #26363d;
      font-family: "Lato", sans-serif;
      font-weight: 300;
      line-height: 1.3em;
}
h1 {
      font-size: 60;
}
h2 {
      font-size: 25px;
}
h3 {
      font-size: 21px;
}
h4 {
      font-size: 19px;
}
h5 {
      font-size: 17px;
}
h6 {
      font-size: 15px;
}
body {
      font-family: "Lato", sans-serif;
      background-image: url("background.png");
}

#nav {
    float: left;
width: 100% !important;
margin: 0 auto;
padding: 0;
list-style: none;
    }
#nav li {

    float: left;
    }
#nav ul li {
     display: inline;
}
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #ccc;
            }
#nav li a:hover {
    color: #c00;
    }
4

5 に答える 5

1

あなたが使用float: left;していて、width: 100%これは間違っているので、100％の幅を削除する必要があります。これにより、メニューバーを中央に配置する必要があるため、使用できmargin: auto;、不要になりますfloat: left;

また、要素を追加するときに、の幅を変更するだけで、水平方向のセンタリングに#nav使用できるように固定幅が必要になります。margin: auto;#nav

今のところ550px、それに応じて変更できるように保持しています。変更した唯一のCSSは#nav

#nav {
    width: 550px;
    margin: auto;
    padding: 0;
    list-style: none;
}

デモ

于 2013-04-18T04:22:10.820 に答える
0

問題を引き起こしているのはfloat: left;あなたです。と を追加して、ナビゲーション内のすべての項目を中央に配置ulできます。この方法では、 で固定幅を指定する必要さえありません。display: inline-block;litext-align: center;ulul

ワーキングデモ

で固定幅を指定すると、ulあとはmargin: 0 auto;.

それが役立つことを願っています!

于 2013-04-18T04:25:08.127 に答える
0

親 div の幅を定義できるオプションが 2 つあります。magin:0 auto;

このように 

.mianNavcon{width:600px;margin:0 auto; // define your website }

HTML

<div class="mianNavcon">
                <ul id="nav">
                <li ><a href="#" style="color:rgb(56,162,188);">HOME</a></li>
                <li ><a href="#" style="color:rgb(123,176,26);">PROJECTS</a></li>
                <li ><a href="#" style="color:rgb(243,45,93);">RESUME</a></li>
                <li ><a href="#" style="color:rgb(234,49,20);">CONTACT</a></li>
                <li ><a href="#" style="color:rgb(237,103,14);">ABOUT</a></li>
      </ul>
      </div>

デモ-1

------------------

2番目のオプションはID nav、フロートを削除widthして定義することです

display inline-block;

このように 

.mianNavcon{text-align:center;}
#nav {
       display:inline-block;
    padding: 0;text-align:left;
    list-style: none;
        }

デモ-2

于 2013-04-18T04:25:58.960 に答える
0

481px (最小) などの明示的な絶対幅を on に設定し#nav、削除しfloat:leftます。デモ

于 2013-04-18T04:26:46.290 に答える