1

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

我相信我已经正确地将图像居中，但似乎我没有，如果这不是正确的方式，我讨厌使用填充，因为我希望这对于响应式设计来说尽可能具有语义。我还需要将它放置在两个边界内，一个边界堆叠在前面。大概我需要使用 z-index 来做到这一点，但我还没有那么远。

提琴手

4

4 回答 4

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/

于 2012-06-26T11:10:21.967 回答
1

您是否正在寻找这样的东西：

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

于 2012-06-26T11:10:34.457 回答
0

您需要同时使用 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）。

于 2012-06-26T11:06:01.660 回答
0

您可以尝试 AlphaMale 在这里的建议：如何在 div 中水平和垂直居中图像

在您的图像之前包含一个“跨度”标签。然后将此属性添加到“锯”类：

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

!important 是覆盖实际拥有的 margin: 0 auto 。

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

于 2012-06-26T11:10:07.567 回答