如何以div格式居中圖像（高度 - 屏幕百分比）

我的網站有一個標題，佔用了屏幕的20％。我想要一個圖像（它是標題高度的90％）在標題的中心右邊。我沒有任何問題需要水平居中，但我無法垂直居中。下面的代碼：如何以div格式居中圖像（高度 - 屏幕百分比）

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Website</title> 
    <link rel="stylesheet" href="stylingpercent.css" /> 
</head> 

<body> 

    <header> 
     <div class="logoheader" > 
      <img class="mainlogo" src="logo.png" alt="logo"> 
     </div> 

    </header> 



</body> 

</html>

body { 
    margin:0px; 
} 


.logoheader{ 
    height: 20vh; 
    background:rgb(1,1,1); 
    margin:0px; 
    text-align: center; 
} 


.mainlogo { 
    max-height:90%; 
}

來源

2014-03-13 user3415893

圖像的高度是否爲靜態？ – Shahar

不，它取決於標題高度 – user3415893

垂直對齊，你可以參考[我的答案]（http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-高度/ 18516474＃18516474）。這裏是一個演示：http://jsbin.com/munak/1/edit –

補充一點：

line-height: 20vh;

到.logoheader。 DEMONstration。

來源

2014-03-13 18:36:26

它不適用於我的瀏覽器（（ – user3415893

如何以div格式居中圖像（高度 - 屏幕百分比）

回答

相關問題