1

我处于一个非常烦人的境地......我认为最好只是展示我所做的并告诉你问题是什么，而不是解释一切。

我一直在寻找解决方案很长一段时间，但我找不到它。

如果您访问http://jsfiddle.net/bd3Ms/，您会看到三个带有 h1 标签和内部图像的框。我已经用 CSS 剪辑了图像（必须以这种方式完成，无法绕过）。我正在尝试将图像居中放在框中，但我无法做到这一点。我认为这是因为 img 元素的绝对定位。

代码：

<html>
<head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

    <style type="text/css">
        .photo-div {
            overflow:auto;
            height:250px;
            border: 1px solid #000;
        }

        .photo-div-content {
            width:100%;
            margin:0 auto;
        }

        img.clipped {
            position:absolute;
            clip:rect(0px,200px,200px,0px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="div-1" class="photo-div span4">
                <div class="photo-div-content">
                    <h1>Logitech Mouse</h1>
                    <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png">
                </div>
            </div>
                <div id="div-2" class="photo-div span4">
                <div class="photo-div-content">
                    <h1>Logitech Mouse</h1>
                    <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png">
                </div>
            </div>
            <div id="div-3" class="photo-div span4">
                <div class="photo-div-content">
                    <h1>Logitech Mouse</h1>
                    <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png">
                </div>
            </div>
        </div>
    </div>
</body>

我正在使用 Twitter Bootstrap，并且我正在构建的网站将完全响应，所以只添加一个 margin-left 对我来说是行不通的。

我希望我设法弄清楚问题所在。

在此先感谢您的帮助！

4

4 回答 4

1

不裁剪和居中图像怎么办？

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

现场示例：http: //jsfiddle.net/bd3Ms/1/

这里有更多选择：

于 2013-02-21T20:06:19.317 回答
1

如果我正确理解您的问题，您希望将文本和剪切的图像居中。看看这是否有帮助：http: //jsfiddle.net/panchroma/7Lq6B/

重要的是我已经将图像包裹在一个居中的 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>

祝你好运！

于 2013-02-21T20:45:36.473 回答
1

由于图像是绝对定位的，因此您可以使用更多选项。试试这个：

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

这不是漂亮的代码，但它位于父 div 的中间。

于 2013-02-21T20:59:05.030 回答
1

我使用与 CSS sprites 相同的技术来做到这一点。

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

现在我认为这是实现我的目标的最佳方式：使用 CSS 在 div 中间显示图像的一部分。

于 2013-02-21T22:05:15.077 回答