文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在标题中居中标识背景img和文本？

问如何在标题中居中标识背景img和文本？
EN

Stack Overflow用户

提问于 2012-05-03 22:54:34

回答 4查看 8K关注 0票数 2

我被一些看起来应该很简单的事情给难住了！

我正试着在<header>的中央放置一个标志。徽标由带有背景图像的<a>组成，背景图像是徽标图标，锚文本是徽标名称。我在<h1>上使用margin: 0 auto;将徽标图标居中，但找不到一个很好的解决方案来将图标和文本作为一个单元居中。

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

有什么想法吗？

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-05-03 23:00:53

我通常这样做：

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

票数 1

Stack Overflow用户

发布于 2012-05-03 23:00:18

您可以使用css定位背景。

background-position:center;

您还可以按像素或百分比定义它

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

票数 1

Stack Overflow用户

发布于 2012-05-03 23:34:32

你已经把背景网址放在左边了，应该是居中

尝尝这个

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10433935

复制

相似问题

问如何在标题中居中标识背景img和文本？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在标题中居中标识背景img和文本？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在标题中居中标识背景img和文本？
EN