父div中的垂直对齐元素

Question

我遇到一个问题，即元素的父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>

因此，问题在于，如果我更改main-header类的最小高度，元素将保持在同一位置，并且不会自动调整，但是我的代码看起来应该是在元素中间自动对齐？

Answer 1

如果使用display:table; ，则应使用height而不是min-height 。 此显示规则的行为将使元素无论如何都会扩展以适合其内容。

你有一个额外的,这会杀死你的统治。

---

正确的是：

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