Grow your CSS skills. Land your dream job.

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

  • # December 21, 2012 at 7:37 am

    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….

    # December 21, 2012 at 8:00 am

    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;

    # December 21, 2012 at 8:09 am

    @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.

    # December 21, 2012 at 8:10 am

    Why use absolute/relative positioning? Just use;

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

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

    # December 21, 2012 at 8:23 am

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

    # December 21, 2012 at 8:23 am

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

    # December 21, 2012 at 8:24 am

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

    # December 21, 2012 at 9:24 am

    You can use CSS calc unit

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

    # December 21, 2012 at 9:51 am

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".