Html 元素内部具有绝对位置时的CSS边距

我现在的处境很烦人。。。 我认为最好只是展示我所做的，告诉你问题是什么，而不是解释一切

我一直在寻找一个解决方案，但我找不到

如果你去，你会看到一个三个盒子，里面有一个h1标签和一个图像。我用CSS剪裁了图像（必须这样做，不能绕开）。我试图将图像放在盒子的中心，但我无法做到这一点。我认为这是因为img元素的绝对位置

代码：

.摄影组{
溢出：自动；
高度：250px；
边框：1px实心#000；
}
.摄影组内容{
宽度：100%；
保证金：0自动；
}
img.clipped{
位置：绝对位置；
剪辑：rect（0px，200px，200px，0px）；
}
罗技鼠标
罗技鼠标
罗技鼠标

我正在使用推特引导，我正在建设的网站将完全响应，所以仅仅增加一个空白对我来说是不起作用的

我希望我能把问题弄清楚

---

提前感谢您的帮助

不剪裁图像并使其居中如何

img.clipped {
    background:url(https://www.google.nl/images/srpr/logo3w.png) center center no-repeat;
}

现场示例：

这里有更多的选择：

• 绝对中心（垂直和水平）图像
  
• 使用CSS剪辑属性创建缩略图：
  

---

不剪裁图像并使其居中如何

img.clipped {
    background:url(https://www.google.nl/images/srpr/logo3w.png) center center no-repeat;
}

现场示例：
这里有更多的选择：
• 绝对中心（垂直和水平）图像
  
• 使用CSS剪辑属性创建缩略图：
  

---

如果我正确理解了您的问题，您需要将文本和剪裁图像居中。看看这是否有帮助：
重要的一点是，我已经将图像包装在一个中心div中，该div的大小与您的剪辑尺寸相同
CSS

.img-wrap{ /* dimensions should match clipping size */
width:200px;
height:200px;
margin:0 auto;
}

HTML

<div id="div-2" class="photo-div span4">
<div class="photo-div-content">
<h1>Logitech Mouse</h1>
<div class="img-wrap">
<img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div>
</div>
</div>

罗技鼠标

---

祝你好运
如果我正确理解了您的问题，您希望将文本和剪裁的图像居中。看看这是否有帮助：
重要的一点是，我已经将图像包装在一个中心div中，该div的大小与您的剪辑尺寸相同
CSS

.img-wrap{ /* dimensions should match clipping size */
width:200px;
height:200px;
margin:0 auto;
}

HTML

<div id="div-2" class="photo-div span4">
<div class="photo-div-content">
<h1>Logitech Mouse</h1>
<div class="img-wrap">
<img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div>
</div>
</div>

罗技鼠标

---

祝你好运
由于图像处于绝对位置，因此您可以使用更多选项。试试这个：

img.clipped {
    position: absolute;
    left: 50%;
    margin-left: -25%;
    clip:rect(0px,200px,200px,0px);
}

---

这不是一个漂亮的代码，但是它是在母div的中间。

因为图像是绝对定位的，你有更多的选择可以玩。试试这个：

img.clipped {
    position: absolute;
    left: 50%;
    margin-left: -25%;
    clip:rect(0px,200px,200px,0px);
}

---

这不是一个漂亮的代码，但它是在父div的中间。

< p>我用CSS精灵使用的同样的技术来做它。

.photo-div-content{
    background: 'url('IMG URL') repeat scroll -0px -0px transparent');
    height: 200px;
    width: 200px;
    margin: 0 auto;
}

---

现在我认为这是达到我的目标的最佳方法：使用CSS在div的中间显示图像的一部分。
我用CSS精灵使用的同样的技术来做。

.photo-div-content{
    background: 'url('IMG URL') repeat scroll -0px -0px transparent');
    height: 200px;
    width: 200px;
    margin: 0 auto;
}

---

现在我认为这是达到我的目标的最好方法：用CSS在一个div的中间显示图像的一部分。如果你解决了你的问题，你应该接受你的答案。如果你解决了你的问题，你应该接受你的答案。