无法将图像居中在div中

Question

我正在尝试将图像居中在div中，该div设计为在右侧水平占据屏幕的65％。但不是这样做，它看起来像这样：

不仅图像不居中，div似乎远远超过宽度的65％（左边的边栏是35％），它继续前进。

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;
}

编辑：这是一个简单易用的JSFiddle，图片当然不会出现，因为它们是本地的，但它应该很好地显示问题：https://jsfiddle.net/ks2za0L7/

Answer 1

以下是一些建议：

#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;
}