Question

我正在寻找在两个边界之间移动锯的图像，所以它看起来像this。

我相信我已经正确地将图像集中在一起但看起来我没有并且我不喜欢使用填充，如果这不是正确的方式，因为我希望这对于响应式设计来说是可能的语义。我还需要它放在两个边框内，一个边框堆叠在前面。据推测，我需要使用z-index来做到这一点，但我还没有那么远。

JsFiddle

Answer 1

嗨玩定位并尝试根据您的参考图像要求制作结果。我希望这会对你有所帮助。

<强> CSS

    #logo-container .saw {
        left: 50%;
        margin: 0 auto;
        position: relative;
        top: 46px;
    }
#tag-container {
    border: 2px solid #00AC9D;
    height: 150px;
    margin-bottom: 5px;
    position: relative;
    width: 1140px;
}

请参阅演示： - http://jsfiddle.net/RJVXE/16/

Answer 2

你在寻找这样的东西：

参见演示： http://jsfiddle.net/rathoreahsan/Fcn96/

Answer 3

您需要同时使用z-index和定位。

.line
{
    height:1px;
    width:100%;
    background:#000;
    position:absolute;
    left:0px;
}
.item1
{
    top:5px; 
    z-index:5;
}
.item3
{
    top:25px; 
    z-index:15;
}


<div style="width:100%; position:relative">
    <div class="line item1"></div>
    <div style="position:absolute; top:0px;left:50px;z-index:10">
          <img src="saw.png" />
    </div>
    <div class="line item3"></div>
</div>

（示例仅为简洁起见使用内联和阻止的CSS引用。远离内联CSS。）

Answer 4

您可以尝试AlphaMale在此处提出的建议：How to center image in a div horizontally and vertically

在您的图片包含'span'标记之前。然后将此属性添加到'saw'类：

#logo-container .saw {
    text-align: center;
    margin-bottom:-50px!important;
}

！important是覆盖margin：0 auto实际上有。

http://jsfiddle.net/2EKWS/1/

图像放置问题

4 个答案: