2

ulに含まれるメニューをコンテナの水平方向の中央に揃えることができません。どうやってするか？

jsFiddle のメニューのライブ デモを参照してください。

<li><a href="aboutus.php">AboutUs</a>
    <ul class="sub">
        <li><a href="aboutsquare.php">About Square Innovations</a></li>
        <li><a href="ourvision.php">Our Vision</a></li>
        <li><a href="ourmission.php">Our Mission</a></li>
        <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
        <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
    </ul>
</li>
4

3 に答える 3

6

ブロック レベルの特性を保持しながら ( display 値ulを使用)、要素をページ フロー内のインライン レベル要素としてアドレス指定できます。.inline-blocktext-align

これを実装するには、次のルールを追加します。

#container {
    text-align: center;
}
ul {
    display: inline-block;
}

これが更新されたデモです。

参照

免責事項:のサポートinline-blockは多少制限されていますいいえ！それは実際には今では非常に広いです. caniuse.com の互換性表を参照してください.

于 2013-01-24T21:02:20.127 に答える
4

メニューが 1 行に収まっている限り、これを実現するための非常にきちんとした、完全にクロスブラウザーで動的な「トリック」があります。ここで非常によく説明されています：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

私の経験では、この問題に対してよく提案されるインラインブロックは、レガシーブラウザーではあまりサポートされていません。正直なところ、私はそれを使用することはありません。私はいつも、マシュー・ジェームス・テイラーが説明する巧妙な方法を採用しています。

編集： リクエストに応じて、テクニックを簡単に説明します。html は通常のリンクのリストのように見え、余分なラッピング div で囲まれている必要があります。このようなもの：

<div class="menu-wrapper">
  <ul>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
  </ul>
</div>

あとはcss作業です。手順は次のとおりです。

  • ラッパーを左にフロートさせ、幅を 100% にして、ビューポートの幅全体を占めるようにします。
  • ulと の両方を左にフロートliさせ、コンテンツに合わせて幅を広げないようにします。
  • ulのaposition: relativeを与えleft: 50%ます。これにより、左端が親の中心に移動します。これは、ビューポートの中心を意味します。
  • 最後に、lia position: relativeofを指定する必要がありますleft: -50%。これにより、それらは親の左端を越えて移動しul、リストの中心が親liの左端に揃えられulます。前のステップでその端をビューポートの中心にしたので、メニューは事実上中央に配置されました。

前に述べたように、すべて Matthew James Taylor の功績によるものであり、彼の完全な説明を必ず確認してください。彼が描いた絵は、それをより理解しやすくしてくれます。

edit
リクエストに応じて、テクニックを示すために小さなフィドルを設定しました: http://jsfiddle.net/fDmCQ/

于 2013-01-24T21:44:15.747 に答える
1

<ul>toの余白を変更し0 auto、幅を指定します (~575px 以上)。

jsFiddle の例

 ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0 auto;
     padding: 0;
     width:600px;
     list-style: none;
     text-align: center;
 }
于 2013-01-24T20:52:50.120 に答える