無法將圖像置於div中央

-1

我試圖將圖像置於div內，該div設計爲在右側水平佔用65％的屏幕。不過，它看起來像這樣： enter image description here 無法將圖像置於div中央

不僅圖像不居中，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/

來源

2015-05-04 TheDudeGuy

使用文本對齊：中心在圖像之前的子div的CSS，所以它會居中您的內容。 –

你必須顯示更多的代碼。做一個Jsfiddle演示。我嘗試了你的代碼，但不能複製問題;例如：http://jsfiddle.net/syfkpjje/ –

這已經在這裏得到解答：http://stackoverflow.com/questions/9980531/css-html-center-image-in-div – Josh

這裏的一些建議：

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

來源

2015-05-04 19:04:52

無法將圖像置於div中央

回答

相關問題