Unable to center an image within a div

Question

I'm trying to center an image within a div which is designed to take up 65% of the screen horizontally on the right. Instead of doing that however, it looks like this: enter image description here

Not only is the image not centered, the div seems to be much more than 65% of the width (the sidebar on the left is 35%), it keeps going.

HTML:

<div class='presskit_main_section'>
        <div class="presskit_image_placeholder">
           <img src="images/presskit_image_placeholder.jpg" width="55%" height="" id="image_placeholder"/>
        </div>
</div>

CSS:

.presskit_main_section{
    float: right;
    width: 65%;
    height:100vh;
    display: inline-block;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

.presskit_image_placeholder{
    width: auto;
    height: 15rem;
    margin: 0 auto;
}

#image_placeholder{
    margin: 0 auto;
}

EDIT: Here's a JSFiddle to make things easier, the images won't show up of course because they're local, but it should show the problem well: https://jsfiddle.net/ks2za0L7/

use text-align:center in css of the child div before image so it will center your content. — Alaksandar Jesus Gene, May 04 '15 at 18:48
You have to show more code. Make a Jsfiddle demo. I tried with your code but couldn't replicate problem; eg: http://jsfiddle.net/syfkpjje/ — Dr Upvote, May 04 '15 at 18:49
This has been answered here: http://stackoverflow.com/questions/9980531/css-html-center-image-in-div — Joshua Hunt, May 04 '15 at 18:50
You also should define widths of element your trying to position, instead of auto. — Dr Upvote, May 04 '15 at 18:51
@Nooneknows I added a JSFiddle to show you all the code involved. — Andrew, May 04 '15 at 18:54

score 2 · Answer 1 · answered May 04 '15 at 19:04

Here's some suggestions:

#allelementWrapper { 
    width: 920px; // 65% of what width? Define a wrapper around all elements.
    position: relative;
    margin: 0 auto;
}

#elementYouwanttobe65percentonRight {
        float: right; 
        min-width: 65%;
        width: 65%;
        max-width: 65%;
}

#imageyouwanttoCenter {
      width: 200px; // define a width of element you are centering
      height: 100px;
      margin: 0 auto;
}

Unable to center an image within a div

1 Answers1