Question

这是我创建的fiddle。我希望装饰品永远留在屏幕中间。我无法弄清楚如何去做。我尝试将它包装在一个div中，但这也不起作用。

HTML

<span class="border-top"></span>

CSS

.border-top {
background: url("http://i.imgur.com/Txoi4sd.png") no-repeat;
clear: both;
display: block;
height: 47px;
margin-bottom: 50px;
width: 100%;
}

Answer 1

http://jsfiddle.net/wkkrnqqx/1/

怎么样？

.border-top {
    background: url("http://i.imgur.com/Txoi4sd.png") no-repeat;
    display: block;
    height: 47px;
    margin-bottom: 50px;
    width: 100%;
    background-position:50% 0;
}

Answer 2

＆＃13;

.border-top {
    background: url("http://i.imgur.com/Txoi4sd.png") center center no-repeat;
    clear: both;
    display: block;
    height: 47px;
    margin-bottom: 50px;
    width: 100%;
}

＆＃13;

<span class="border-top"></span>

＆＃13;

这可能会成功。

参考：http://www.w3.org/TR/css3-background/#the-background

无论屏幕尺寸如何，都要保持图像居中？

2 个答案: