Forums

sandy

I have a div 550 x 250 px. I want to insert an image (size width = 100px & height any size) in the middle of the div....

jurotek

Just a quick idea. This could work

div {position:relative; width:550px; height:250px; }
div img {position:absolute; top:-225px; left:-90px; margin:50% 0 0 50%; }

Looks like you changed your original post after I gave you solution. So now height is unknown?

than try display table cell for your container and apply vertical align middle and margin 0 auto;

sandy

@jurotek
Thanks for reply. sorry mistake in my statement. your code only for fixed size of images. but i want to insert images of differ height...... please tell me solution for this issue.

AndyHowells

Why use absolute/relative positioning? Just use;

  img { display: block; margin: 0 auto; }

Example pen: http://codepen.io/andyunleashed/pen/imdlA

sandy

thanks @jurotek problem solved by using "display:table-cell" and "vertical-align:middle". thanks for suggestion.....

jurotek

@andy_unleash, I think OP wants something closer to this, http://codepen.io/jiri/pen/AtByl

jurotek

@sandy, you welcome, FYI, there are more ways to do it tho

EkingRDL

You can use CSS calc unit

  .logo {
      margin-top: calc(50% - logoheight);
  }

AndyHowells

@ekingrdl - Whoa now, that's overkill for what's needed and browser support is pretty dodgy - http://caniuse.com/#search=calc

treehouse : what would you like to learn today?

Forums

[Solved] How to make an image center (horizontally) inside a bigger div? Using only css.