web-dev-qa-db-ja.com

CSSで<ul>要素を中央に配置するのを手伝ってもらえますか？

私は非常に簡単なはずの何かに困惑してきましたが、実りのない3時間後にはまだ解決していません。

友人が his WordPress website のテンプレートを修正して、水平ナビゲーションメニューバーがページの水平方向の中央にくるように頼みました。赤いセクションの下部中央-それは、赤いページの両側にある2つのエンブレムの間にちょうど収まります。

赤いセクション（class="header"）にはtext-alignはcenterに設定されます。これは、タイトルとその下の説明テキストを中央揃えにするのに十分なようですが、何らかの理由でメニュー（ul）をページの中央に揃えることができません。

誰かが私が間違っていることを提案してくれますか？メニューを中央に配置できないのはなぜですか？動作させるためにスタイルシートを変更する必要があるのは何ですか？

cssnavigationhtml-listscenter
49
Salim Fadhley

ブロックの行を中央に配置するには、インラインブロックを使用する必要があります。

ul.menu { display: block; text-align:center; }
ul.menu li { display: inline-block; }

IEはインラインブロックを理解しませんが、IE専用にインラインに設定しても、インラインブロックとして動作します。

<!--[if lt IE 8]>
ul.menu li { display: inline }
<![endif]-->
74
Andrew Vit

1書き込みstyle="text-align: center;"親へdiv of ul

2書き込みstyle="display: inline-table;"からul

2書き込みstyle=" display: inline;"からli

<div class="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
  </ul>
</div>

<style>
.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline;}
</style>

終わり

34
Dashrath

ul ul{ width:700px; margin:0 auto;}に指定された幅

0
Mario Gonzales Flores

最適な方法は次のとおりです。

Ulを新しいdiv id = "topmenu"またはそのようなものでラップし、次のスタイルを指定します

bottom:0;
position:absolute;
width:780px;

そしてul.menuにこれを与えます

margin:0 auto;
width:535px;

ここでの唯一の落とし穴は、メニューリストの幅を設定していることです。したがって、メニュー項目の幅を変更する場合は、CSSファイルでも変更する必要があります（つまり、新しいメニュー項目を追加する場合）。

PDATE：幅を手動で設定しないことに関する上記のコメントに気づいただけです。ほんの少しのJavaScriptを使用する場合は、これをドキュメントの準備ブロック内に貼り付けて、width: 535px;

var sum = 0; jQuery('.menu').children().each(function() { sum += jQuery(this).outerWidth(); }); jQuery('.menu').css('width', sum + 30);

これにより、ページがロードされるとcss widthプロパティが実際にレンダリングされた幅に設定されるため、レイアウトが機能します。

以下の完全なHTML：

<div id="header">
    <h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
    <p class="description">A Website by Frank Key</p>
    <div id="topmenu">
        <ul class="menu">
        <li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>      
        <li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
        <li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>    
    </ul>
</div>
</div>
0
Glenn Slaven