Question

我感到很难过，感觉应该很简单！

我正在尝试将徽标置于<header>的中心。徽标由<a>和背景图像组成，背景图像是徽标图标，锚文本是徽标名称。我在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

你可以使用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

你已经把背景网址留下了它应该是中心

试试这个

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

Answer 4

这可能有用。

<header style="align:center">

如何在标题中居中徽标背景图像和文字？

4 个答案: