父div中的垂直对齐元素

Question

I am having an issue with elements not vertically aligning in the middle of it's 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>

So the issue being that if I alter the min-height of the main-header class the elements stay in the same place and do not automatically adjust but my code looks like it should be automatically middle aligning the elements?

Answer 1

if you use display:table; , you should use height and not min-height . Behavior of this display rule will do that the element will expand to fit its content anyway.

You have an extra , , that kills you rule .

---

correct is :

.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; 
}