web-dev-qa-db-ja.com

CSSテキスト整列が機能しない

ここにこの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-->

私はそれが機能していないと言うとき、私はテキストが左に揃えられていることを意味します。

csstext-alignmenttext-align
10
user1269625

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

2つの新しいルール（width:100%;とtext-align:center;）を追加するだけです。リストアイテムの幅全体を占めるようにアンカーを展開し、テキストを中央に揃える必要があります。

jsFiddleの例

17
j08691

UL内のdivをブロックのように動作させる必要があります。追加してみてください

.navigation ul {
     display: inline-block;
}
10
madth3

デザインで本当に必要な場合を除き、フローティング要素は避けようとします。 <li>をフロートしたため、通常のflowから外れています。

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

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

3
andyb