19

私はここにこのcssコードを持っています

.navigation{
    width:100%;
    background-color:#7a7a7a;
    font-size:18px;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
}

.navigation li {
    float: left;
}


.navigation ul a {
    color: #ffffff;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

私がやろうとしているのは、クラスのナビゲーションを中央に配置することです。使用してみtext-align:center;ましvertical-align:middle;たが、どちらも機能しませんでした。

ここにHTMLコードがあります

<div class="navigation">
<ul>
<li><a href="http://surfthecurve.ca/">home</a></li>
<li><a href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->

機能しないと言うときは、テキストが左に配置されていることを意味します。

4

3 に答える 3

35

<a>要素のルールを次から変更します。

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}​

に

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
}​

width:100%;2 つの新しいルール (および)を追加するだけtext-align:center;です。リスト項目の全幅を占めるようにアンカーを拡張してから、テキストを中央揃えにする必要があります。

jsFiddle の例

于 2012-09-19T18:52:20.220 に答える
15

UL内部divをブロックのように振る舞わせる必要があります。追加してみる

.navigation ul {
     display: inline-block;
}
于 2012-09-19T18:57:56.377 に答える
4

デザインで本当に必要な場合を除き、フローティング要素を避けるようにしています。浮かせてしまったので<li>正常な流れではありません。

追加.navigation { text-align:center; }して変更.navigation li { float: left; }すると.navigation li { display: inline-block; }、ナビゲーション全体が中央に配置されます。

このアプローチの 1 つの注意点はdisplay: inline-block;、IE6 ではサポートされておらず、IE7 で機能させるには回避策が必要なことです。

于 2012-09-19T19:00:29.093 に答える