I have a header with a logo and a mobile navigation icon. Each of which are insider their own div which is inside a parent container div. I want the contents of each div to be vertically aligned to the middle, and it should stay that way when the page is resized ( page is responsive). I tried setting each div, both parent/child css property of vertical-align middle and it does not work. I also read to change the display property of the parent div to table, and then change each child div to display table-colum then use vertical-align but if I do that the rest of my header is not displayed properly. Is there anyway I can vertically align my content?
Here is my code as-is. I removed my vertical-align code.
<!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>
