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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -