图像放置问题答案

【问题标题】：Image Placement Issues图像放置问题
【发布时间】：2012-06-26 19:22:16
【问题描述】：

我希望在两个边框之间移动锯子的图像，使其看起来像 this。

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

JsFiddle

【问题讨论】：

标签： css image

【解决方案1】：

你在寻找这样的东西吗：

查看演示： http://jsfiddle.net/rathoreahsan/Fcn96/

【讨论】：

是的，正在寻找该格式，但看到图像居中。我将使网站具有响应性，因此随着浏览器尺寸的缩小，它必须保持居中。你在字里行间的定位是完美的。
抱歉，还有一个问题 - 我认为不建议使用空 div？
空的 DIV 用于下边框和来自.saw 的更高z-index 值，因此您必须将其添加到您的标记中。

【解决方案2】：

您好玩过定位，并尝试根据您提到的图像要求制作结果。我希望这会对你有所帮助。

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/

【讨论】：

【解决方案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）。

【讨论】：

【解决方案4】：

您可以在这里尝试 AlphaMale 的建议：How to center image in a div horizontally and vertically

在您的图片之前添加一个“span”标签。然后将此属性添加到“锯”类：

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

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

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

【讨论】：