2

我被一些感觉应该很简单的事情难住了！

我正在尝试将徽标居中在<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;
}

有任何想法吗？

4

4 回答 4

1

您可以使用 css 定位背景。

background-position:center;

你也可以用像素或百分比来定义它

background-position:20px 50px;
background-position:50% 50%;
于 2012-05-03T15:00:18.297 回答
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 规则中指定宽度和高度。

于 2012-05-03T15:00:52.893 回答
1

你把背景网址放在左边它应该是中心

试试这个

background: url('../img/logo.png') no-repeat center;
于 2012-05-03T15:34:31.663 回答
-1

这可能会奏效。

<header style="align:center">
于 2012-05-03T15:00:16.763 回答