html - ロゴの背景画像とテキストをヘッダーの中央に配置するにはどうすればよいですか?

Question

シンプルであるべきだと感じる何かに困惑しています！

の中央にロゴを配置しようとしてい<header>ます。ロゴは、ロゴ アイコンである背景画像付きの で構成され<a>、アンカー テキストはロゴ名です。margin: 0 auto;を使用してロゴ アイコンを中央に配置して<h1>いますが、アイコンとテキストを 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

cssを使用して背景を配置できます。

background-position:center; 

ピクセルまたはパーセントで定義することもできます

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

Answer 2

私は通常このようにします：

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

本当にh1の中にある必要はありません。

結果が表示されたときに、中央に表示されない場合があります。単位を測定し、上記の.logoルール内で幅と高さを指定してください。

Answer 3

背景のURLを左に置いたので、中央に配置する必要があります

これを試して

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

Answer 4

これはうまくいくかもしれません。

<header style="align:center">