css - HTML5ボイラープレートのセンターロゴ

Question

私はhtml5 ボイラープレートとその .ir クラスを使用しています。ロゴをクリックできるようにしました。ページの中央に配置したいのですが、今のところうまくいきません。margin: 0 auto; を試しました。および text-align: center; しかし、どちらも機能していないようです。

html

   <a href="/"><h1 class="ir">logo header</h1></a>

そしてCSS

    h1 {
    height: 373px;
    }

    .ir {
    display: block;
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    background-color: transparent; 
    background-repeat: no-repeat; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background-image: url(http://i.imgur.com/yYnyJ.jpg);
    }
    .ir br { display: none; }

Answer 1

ヘルパークラスにスタイルを直接追加することはお勧めしません。.irこれは、クラスを再度必要とする他の場合（置き換える別のバックグラウンドがある場合）にそれらを再利用できないことを意味します。ir次のようなクラスに加えて、画像に置き換えるマークアップにクラス名を追加してください。

<h2 class="ir myh2classname"></h2>

次に、次のように背景を追加します。

.myh2classname {
  background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center;
}

このように、他のセクションの背景として使用する別の画像がある場合、必要なのは、そのセクションのマークアップに別のクラス名を追加することだけです。

  <h3 class="ir anotherimagereplacement"></h3>

次に、次のような他のセクションの背景を追加します。

   .anotherimagereplacement {
        background: url(path/to/image);
    } 

Answer 2

background-postion: center;ルールに追加します。top center画像を上部に配置し、同時に中央に配置する場合は、値として使用することをお勧めします。

_{注::画像サイズは、中央に表示される よりも小さくする必要が<h1>あります。}

さらに、省略形のプロパティも使用することをお勧めします。

.ir {
    display: block;
    border: 0; 
    text-indent: -999em; 
    overflow: hidden; 
    text-align: left; 
    direction: ltr; 
    *line-height: 0; 
    background: url(http://i.imgur.com/yYnyJ.jpg) transparent no-repeat center;
}

Answer 3

.ir に以下を追加します

background-position: center center;