I am facing a problem where elements are not aligning vertically in the center of their parent div.
CSS:
/* Main body structure */
body{
font-size:0.5em;
}
.main-wrapper {
width: 90%;
margin: auto;
background-color: #efefef;
}
* {
box-sizing: border-box;
}
/* Main header/logo/navigation structure */
.main-header {
padding: 20px;
background-color: #003;
display:table;
width: 100%;
min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
}
.main-logo,
.main-nav, {
display: table-cell;
vertical-align: middle;
}
.main-logo,
.main-nav li {
padding: 10px 20px;
border-radiues: 5px;
background-color:#3CC;
}
.main-nav li {
margin-right: 10px;
display:inline-block;
}
.main-logo {
background-color:#3F6;
}
.main-nav {
padding: 10px;
}
.main-logo a,
.main-nav a {
color: #FFF;
text-decoration:none;
display:block;
text-align:center;
padding: 10px 20px;
}
@media ( max-width: 768px) {
.maing-logo,
.main-nav,
.main-nav li {
display:block;
width: initial;
margin: initial;
}
.main-nav {
padding-left: initial;
}
.main-nav li {
margin-top: initial;
}
HTML:
<div class="main-wrapper">
<header class="main-header">
<h1 class="main-logo"><a href="#">logo</a></h1>
<div class="main-nav">
<ul class="main-nav">
<li><a href="#">HOME</a></li>
<li><a href="#">SEARCH</a></li>
<li><a href="#">MESSAGES</a></li>
<li><a href=logout.php>LOGOUT</a></li>
</ul>
</header>
</div>
The issue arises when adjusting the min-height of the main-header class, as the elements do not automatically realign as expected. The code should automatically centralize the elements but they remain fixed in position. What could be causing this?