【问题标题】:Centering an Absolute Image using %使用 % 将绝对图像居中
【发布时间】:2012-02-25 20:40:48
【问题描述】:

我在使用百分比将绝对定位的图像水平居中时遇到了一些问题。它适用于一个流动的网站,所以我需要将 erasers.png 图像放在背景中。我需要能够以百分比控制它的大小,所以我认为我不能将其设为背景图像。

有没有办法做到这一点?还是有更好的方法来完成同样的事情?

http://jsfiddle.net/vzPUw/6/

【问题讨论】:

  • 您是否使用与示例中提到的相同的图像,其尺寸为 2 X 1 px,将出现在您的内容中心而没有任何重复?

标签: css background-image css-position centering


【解决方案1】:

绝对定位图像的包装器(而不是图像),将 text-align:center 应用于包装器,并将其左右属性设置为 0px。包装器将与标题相同,但会从流程中取出,而图像可以继续充当内联元素,因此居中有效,但将与包装器的上下文隔离。

HTML:

<span id="erasersWrapper">
    <img id="toperasers" src="http://dl.dropbox.com/u/14080718/Final/images/erasers.png" alt="Erasers">
</span>

CSS:

#erasersWrapper{
    position:absolute;
    left:0px;
    right:0px;
    text-align:center;
}

【讨论】:

  • 我试过了,但有些东西不能正常工作。 jsfiddle.net/vzPUw/7 有什么想法吗?
  • 尝试将左右属性设置为-10000px。您还需要将图形的高度指定为其容器的百分比。不确定您确切想要的视觉效果,但我相信这个小提琴包含了这些原则:jsfiddle.net/vzPUw/8 ... 注意:它在每个浏览器中看起来都不同——所以它需要更多的工作——但是维护的效果缩放时图像比例之间的关系。
  • 这是一个很好的开始。谢谢您的帮助。它似乎在 Chrome 中工作。
猜你喜欢
  • 2016-08-25
  • 2012-04-17
  • 1970-01-01
  • 1970-01-01
  • 2012-04-10
  • 1970-01-01
  • 1970-01-01
  • 2017-03-28
  • 2014-06-01
相关资源
最近更新 更多