javascript - Horizontally and vertically align image in div -
javascript - Horizontally and vertically align image in div -
i'm using bootstrap , wordpress.
i've been researching how horizontally , vertically align image within div (classic problem, apparently). used reply question vertically align image: how vertically align image within div
now need horizontally align it. know that, add together margin: 0 auto;
the problem method followed uses margin:auto; , undos vertical align if alter margin:0 auto;
i started create jsfiddle of problem, couldn't replicate it. think it's in bootstrap overriding it, i'm not sure what.
here basic code i'm using vertical align solution on other stackoverflow question:
html
<div class="crop-featured-2"> <img src="image.png"> </div>
css
.container { position: relative; width: 100%; overflow: hidden; } .crop-featured-2 { height: 100px; width: 200px; position: relative; border: 1px solid red; padding: 5px; display:block; } .crop-featured-2 img { min-height: 100px; width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border:0px; padding:0; }
you can see problem @ http://ucaftercruz.com/upcoming/?page_id=30. it's slider @ top , problem in .carousel-inner div. resize browser around 800px wide able see issue.
thanks much in advance!
i had @ web page. think issue solves self if remove width rule selector:
.crop-featured-2 { height: 320px; width: 575px; position: relative; }
instead use
.crop-featured-2 { height: 320px; position: relative; }
javascript jquery html css twitter-bootstrap
Comments
Post a Comment