ヘッダーにロゴの背景画像とテキストを合わせるにはどうすればいいですか？

Question

私はそれがシンプルでなければならないと感じる何かに困惑しています！

私は<header>の中心にロゴを集中させようとしています。ロゴは<a>で構成され、背景イメージはロゴアイコンで、アンカーテキストはロゴ名です。 <h1>にはmargin: 0 auto;を使用してロゴアイコンが中央に表示されていますが、アイコンとテキストを1つの単位として一緒にセンタリングする良い解決策が見つかりません。

<header> 
    <h1> 
    <a href="#" class="logo">Logo Name</a> 
    </h1> 
</header> 

CSS：

header h1 { 
    height: 54px; 
    width: 54px; 
    background: url('../img/logo.png') no-repeat left; 
    margin: 0 auto; 
} 

a.logo { 
    font-size: 33px; 
    margin: 0 auto; 
    display: block; 
    padding-top: 20px; 
} 

任意のアイデア？

Answer 1

ことによってそれを定義することができます：それは本当にH1内である必要はありません

<style> 
    .logo{ 
     margin: 0px auto; 
     padding-left: 120px; /* the space between the start of your logo and your text */ 
     padding-top: 30px; /* the vertical space between the top and your text, to center the logo*/ 
     display: block; /* very important since normally anchors are inline */ 
     background: url(path/to/logo.png) top left no-repeat; /* obviously :) */ 
    } 
</style> 

。

結果が表示されると、中央に表示されず、ユニットを測定し、上記の.logoルール内で幅と高さを指定することができない場合があります。

Answer 2

これは機能する場合があります。

<header style="align:center"> 

Answer 3

あなたはcssを使用して背景を配置できます。

background-position:center; 

あなたも私は通常、このようにそれを行うピクセルまたはパーセント

background-position:20px 50px; 
background-position:50% 50%; 

Answer 4

あなたが背景のURLを入れているが、左には

の中心である必要があり、関連するCSSで何本

background: url('../img/logo.png') no-repeat center;