css - 中心に置くのを手伝ってくれませんかCSSで要素？

Question

非常に簡単なはずのことで頭を悩ませていましたが、実りのない 3 時間の後で、まだ解決していません。

友人から、WordPress Web サイトのテンプレートを修正して、水平ナビゲーション メニュー バーがページの水平方向の中央に配置されるように依頼されました。彼はそれが赤いセクションの下部中央にぴったりと収まるようにしたいと考えています。

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

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

Answer 1

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

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]-->

Answer 2

style="text-align: center;"1親へdivの書き込み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>

終了

Answer 3

それを行う最良の方法はこれです：

ul を新しい div id="topmenu" などでラップし、次のスタイルを指定します

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

ul.menuにこれを与えます

margin:0 auto;
width:535px;

ここで唯一の問題は、メニュー リストの幅を設定していることです。そのため、メニュー項目の幅が変更された場合は、CSS ファイルでも変更する必要があります (つまり、新しいメニュー項目が追加された場合)。

更新:幅を手動で設定しないという上記のコメントに気付きました。ほんの少しの JavaScript を使用する場合は、これを document ready ブロック内に貼り付けて、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>

Answer 4

絶対配置されているため、 left 属性を指定できます。

.menu { 左: 125px; }

125px前後が良いでしょう