0

これは私のページのヘッダーです:

--------------------------------
 Logo  | fixed  | Title with    
 Image | margin | unknown width 
--------------------------------

ページのヘッダー全体を水平方向に中央揃えにしたい。現在、コンテナの背景画像としてロゴ画像を設定し、タイトルをコンテナにラップしています。

HTML は次のとおりです。

<header role="banner">
  <div class="logo">
    <h1>Title</h1>
  </div>
</header>

CSS は次のとおりです。

header[role="banner"] .logo{
  height: 76px;
  background: url(/images/logo.png) no-repeat;
}

.logo h1{
  line-height: 76px;
  text-indent: 96px;
}

答える前に、この問題の難しい部分は次のとおりであることに注意してください。

  1. タイトルの幅は不明です。
  2. タイトルの左側にロゴ画像があります。タイトルを中央に配置するだけで、私はすでに方法を知っていますが、私が望むものではありません. 画像を中央に配置するのは間違っています — [ロゴ + タイトル] は中央に配置する必要がありますが、ロゴはヘッダーの中央に配置しないでください。
4

4 に答える 4

2

あなたの HTML がロゴとページ タイトルを表示する最良の方法かどうかはわかりません。私は個人的に<img>ロゴのために行くだろう.

display: tableとdisplay: tableセルを使用して、幅を知らなくてもセンタリングできます。

ロゴの画像でそれを行う方法は次のとおりです。

HTML

<header role="banner">
    <div class="extra-container">
      <div class="logo">
        <img src="http://placehold.it/100x76" alt="Logo Image" />
      </div>
      <h1>Title</h1>
    </div>
</header>

CSS

header[role="banner"] {
  display: table;
  margin: 0 auto;
}

header[role="banner"] .extra-container {
  display: table-cell;
}

header[role="banner"] .logo {
  margin-right: 40px;
  float: left;
}

header[role="banner"] .logo img {
  display: block;
}

h1{
  line-height: 76px;
  display: inline-block;
}

http://jsbin.com/UhIqUXe/1/edit

于 2013-11-08T00:13:02.903 に答える
0

<div>正直に言う必要はありません。背景画像の背景を次の<header>ようにします。

header[role="banner"] {
  background: url(/images/logo.png) center top no-repeat;
  width: 100%;
  height: 76px;
}

そして、あなたのタイトルを中央に置くtext-align: center;

于 2013-11-08T00:01:04.373 に答える
0

マージン トリックを機能させるには、ヘッダーの幅を指定する必要があります。正確な幅がわからない場合は、ヘッダー タグにパーセンテージを使用できます。

于 2013-11-08T00:01:28.600 に答える