html - CSS margin when element inside has position absolute -
i'm in quite annoying situation... think it's best show i've made , tell problem is, instead of explaining everything.
i've been searching solution quite while now, can't find it.
if go http://jsfiddle.net/bd3ms/ see 3 boxes h1 tag , image inside. have clipped image css(this has done way, can't around that). i'm trying center image in box, can't manage that. think that's because of absolute positioning of img element.
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 using twitter bootstrap , website i'm building going responsive, adding margin-left not work me..
i hope managed create clear problem is.
thanks in advance help!
what not clipping , centering image?
img.clipped { background:url(https://www.google.nl/images/srpr/logo3w.png) center center no-repeat; } live example: http://jsfiddle.net/bd3ms/1/
more alternatives here:
absolute center (vertical & horizontal) image http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ creating thumbnails using css clip property: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html html twitter-bootstrap css
No comments:
Post a Comment