Question

我的网站有标题，需要20％的屏幕。我想要一个图像（标题高度的90％）正好在标题的中心。水平居中图像没有问题，但我无法垂直居中。这是代码：

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

Answer 1

添加：

line-height: 20vh;

到.logoheader。 DEMONstration

如何在div中居图像（高度 - 屏幕的百分比）

1 个答案: