html - 如何将 Logo 背景图像和文本在标题中居中？

Question

我被一些感觉应该很简单的东西难住了!

我正在尝试将 Logo 置于 <header> 的中心。该标志由<a>组成。背景图像是 Logo 图标， anchor 文本是 Logo 名称。我的 Logo 图标使用 margin: 0 auto; 居中关于<h1>但找不到一个好的解决方案将图标和文本作为一个整体居中。

<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

我通常这样做:

<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 规则内指定宽度和高度。