无法使用背景位置居中图像

时间:2014-08-06 10:31:04

标签: html css

我在这方面都很新,所以如果它看起来像笨拙的代码那就很抱歉。

我正在尝试做一些看似简单的事情。 我有一个图像,它也链接到其他网址,我不能放在页面的中心。 如果我使用background-position = center而没有链接它工作正常(经过一些修改),当我添加它显示在页面顶部的链接时。 我做错了什么?

头部和风格我有这样的界限:

  

#main { background-image:url('google.png'); background-repeat:no-repeat; background-position:center ; display:block; margin:0 auto; text-indent:-9999px; width:137px; height:137px; }

在身体中我有这条线:

  

<body>              <a href="http://www.google.com" id="main">google</a>   </body>   

谢谢, 鲁文

3 个答案:

答案 0 :(得分:0)

如果您想将图片链接放置到页面中心,请尝试将您的css边距部分更改为:

margin: 50% auto;

这是你的意思吗?

将背景图像定位在锚点中仅与锚点相关,而不是整个页面。这可能就是为什么它没有链接就适合你。如果您不希望显示“google”文字,则只需将其删除即可。

看看这个例子: http://jsfiddle.net/638Y4/

答案 1 :(得分:0)

尝试围绕divanchor并设置text-align:center;

喜欢

<div style="text-align:center;"><a href="http://www.google.com" id="main">google</a></div>

答案 2 :(得分:0)

您可以创建链接display: inline-block并将内部格式设置为样式text-align: center; Example