Question

我目前正在练习我的响应式设计技能，并且遇到了我不理解的错误。当设备屏幕低于768px时，我希望它显示图标，而不是正常的导航栏。我希望这些图标垂直居中。但是，当我在全屏上运行以下代码时，导航栏会垂直居中，但是当您缩小到移动尺寸时，图标不会垂直居中。任何帮助将不胜感激。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Colmar Academy</title>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
    <!-- NAVIGATION -->
    <div id="navbar">
        <div class="brand">
            <img src="assets/images/ic-logo.svg" alt="Logo">
            <h1><span class="special">COLMAR</span>ACADEMY</h1>
        </div>
        <ul class="menu">
            <a href="#"><li>On campus</li></a>
            <a href="#"><li>Online</li></a>
            <a href="#"><li>For companies</li></a>
            <a href="#"><li>Sign in</li></a>
        </ul>
        <ul class="truncated-menu">
            <img src="assets/images/ic-logo.svg" alt="Logo">
            <img src="assets/images/ic-on-campus.svg" alt="On campus">
            <img src="assets/images/ic-online.svg" alt="Online">
            <img src="assets/images/ic-login.svg" alt="Sign in">
        </ul>
    </div>
</body>
</html>

CSS：

/* GENERAL */
html {
    background-color: #000;
}

/* NAVIGATION */
#navbar {
    width: 100%;
    height: 64px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}

.brand {
    display: flex;
    margin-left: 24px;
    align-items: center;
}

.menu {
    display: flex;
    align-items: center;
    margin-right: 24px;
}

.menu li {
    margin-left: 16px;
}

.truncated-menu {
    display: none;
}

/* Mobile responsive design */
@media only screen and (max-width: 768px) {
    .brand {
        display: none;
    }

    .menu {
        display: none;
    }

    .truncated-menu {
        width: 100%;
        height: 64%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

Answer 1

这是我的错误高度，应该是64px而不是64％。

Answer 2

 .truncated-menu {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;

}

将高度设置为64px（您想要的高度），然后在.truncated-menu类中添加空白/边距：0。默认边距和填充实际上是破坏此布局的原因。祝你好运！

align-items：居中;在截断菜单上不起作用

2 个答案: