0

Web サイトの上部に 1 つのヘッダー バーがあります。タグ内<header>には、いくつかのリスト アイテムが左側に、もう 1 つが右側に浮いている順序付けられていないリストがあります。ヘッダーの要素の真ん中に貼り付けたいです。これを行う最善の方法は何ですか？これまでのところ、ページは基本的に次のように設定されています。

<header>
  <ul>
    <li class="left">Item 1</li>
    <li class="right">Item 2</li>
  <ul>

  <h1>Title of site</h1>
</header>

そして、<h1>タグには text-align: center と margin-top: -45px があり、リスト項目と同じレベルに配置されます。問題は、h1 が正確に中央に配置されていないことです。この動作を実現するためにヘッダーを設定する最良の方法は何ですか?

これはjfiddleの例で、タイトルが実際には中央に配置されていないことがわかります。

4

2 に答える 2

1

text-align:center; のときに何かを完全に中央に揃えるための良いトリックです。次のことを行うことはオプションではありません。

1) 中央に配置したい要素の正確な幅を取得します (div、hx タグなど)
2) アイテムの位置が他の要素の影響を受けないように要素を絶対位置に配置します
2) 位置を left:50% に設定します (要素の開始はちょうど半分です) 次に、margin-left: アイテムの幅の負の半分を指定します。

例 JS フィドルでは、h1 の幅は 106px です。したがって、それはあなたが置くCSSです

header h1 {
    position:absolute;
    width:106px;
    left:50%;
    margin-left:-53px;
    top:6px;
    font-size: x-large;
    color: white;
}

更新された JS フィドル

于 2013-05-27T01:37:33.770 に答える
0

あなたは試すことができます

h1 { position: absolute; top: 45px; left: 45%; }

または、このようにヘッダーの上に新しい div を追加してみてください

<div id="h1wrapper">Your h1 goes here</div>

あなたのCSSで

#h1wrapper { display: block; height: 0px; width: 100%; text-align: center; overflow: visible }
h1 { margin-top: 45px; font-size: 16px; }
于 2013-05-26T21:59:03.417 に答える