I find myself in a tricky situation right now. To make things easier, I'll show you what I've created and highlight the issue, rather than explaining it all.
I've been on the hunt for a solution for quite some time, to no avail.
If you visit http://jsfiddle.net/bd3Ms/, you'll come across three boxes with an h1 tag and an image inside. I've used CSS to clip the image (which is necessary), but I'm struggling to center it within the box. I suspect it's due to the absolute positioning of the img element.
Here's the code:
<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>
I'm utilizing Twitter Bootstrap for a fully responsive website, so simply adding a margin-left won't cut it..
I hope I've clearly outlined the issue.
Thank you in advance for your assistance!