Question

我有一个带徽标和移动导航图标的标题。每个都是内部人员，他们自己的div在父容器div中。我希望每个div的内容垂直对齐到中间，当页面调整大小时（页面响应），它应该保持这种状态。我尝试设置每个div，垂直对齐中间的父/子css属性，它不起作用。我还读取将父div的显示属性更改为table，然后更改每个子div以显示table-colum然后使用vertical-align但如果我这样做，我的其余标题将无法正确显示。无论如何我可以垂直对齐我的内容吗？

这是我的代码原样。我删除了垂直对齐代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
#container {
    width: 100%;
    max-width: 100%;
    border: 0px;
    margin: 0px;
    background-color: blue;
}

#logoContainer {
       display: inline-block;
    width: 75%;
    max-width: 75%;
    border: 0px;
    margin: 0px;
    background-color: blue;
}

#logo {

    width: auto;
    max-width: 90%;
    min-width: 90%;
}

#menu{

    display: inline-block;
    width: 25%;
    float: right;

}

#mobileMenu {

    width: 100%;
    background-color: green;
    color: white;
    display: none;
}
</style>


<link href="content/hamburgers.css" rel="stylesheet">




</head>
<body>

<div id="container">
    <div id="logoContainer">

        <img id="logo" src="content/logo.png" />

    </div>

    <div id="menu">
        <button class="hamburger hamburger--elastic" type="button">
            <span class="hamburger-box">
                <span class="hamburger-inner"></span>
            </span>
        </button>

    </div>

</div>



<div id="mobileMenu">
    add somome content

</div>



</body>


</html>

CSS垂直对齐div中心的内容

0 个答案: