css - 垂直对齐父 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>

所以问题是，如果我改变主标题类的最小高度，元素会保持在同一个位置并且不会自动调整，但我的代码看起来应该自动居中对齐元素？

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