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

垂直对齐父div中的元素

1 个答案: