Here's the relevant code. I need to align the nav menu vertically in the green area (.menu-box). I can only seem to center it horizontally. What am I missing? (I tried vertical-align: middle; but to no effect. I have tried various combinations of display: and flex-flow: but have not found one that works.
<!doctype html>
<html>
<head>
<style>
.header-box {
flex-flow: column wrap;
display: inline-flex;
background-color: beige;
width: 100%;
height: 100px;
column-gap: 0px;
}
.logo-box {
background-color: pink;
height: 100%;
width: 25%;
align-content: flex-start;
min-width: 85px;
}
.logo-box p {
flex-flow: column nowrap;
font-size: 23px;
}
.menu-box {
background-color: green;
width: 50%;
height: 100%;
text-align: center;
}
.menu-box nav {
font-size: 23px;
background-color: yellow;
}
.dummy-box {
background-color: red;
width: 25%;
height: 100%;
}
</style>
</head>
<body>
<span class="header-box">
<span class="logo-box">
</span>
<span class="menu-box">
<nav>
<a href="/html/">Home</a> |
<a href="/css/">Menu</a> |
<a href="/js/">Gallery</a> |
<a href="/python/">About</a>
</nav>
</span>
<span class="dummy-box">
</span>
</span>
</body>
</html>
Did you tried add the flex inside the .menu-box?
.menu-box {
background-color: green;
width: 50%;
height: 100%;
display: flex;
align-items: center;
}
This will make the nav menu flex container and vertically align its child elements (in this case, the <nav> element) to the center.
With these changes, the nav menu should now be vertically centered within the green area .menu-box. Adjust the justify-content property to control the spacing between the nav items. If you need, you can include justify-content: space-around in the .menu-box