Bootstrap5中如何将navbar-nav类元素的logo居中并调整导航栏高度

问题描述 #

我正在开发一个业余站点的后端，同时重新设计前端，由于前端知识储备有限，所以使用了Bootstrap5框架。我需要将旧版本站点的菜单迁移到新版本，理想效果如下：

我尝试使用Bootstrap重写菜单，但遇到了两个问题：无法将logo精准定位在菜单中心，缩小菜单高度时内部元素会上移，当前实现效果如下：

现有HTML代码 #

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="css/private.css">
    <title>IT-Hogwarts | Добро пожаловть в школу чародейства и магии!</title>
</head>
<body>
    <header class="header">
        <nav class="navbar navbar-expand-lg menu">
            <div class="container">
                <button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbar__content" aria-controls="navbar__content" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse menu__elements" id="navbar__content">
                    <ul class="navbar-nav menu__nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Главная</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Уровни магии</a>
                        </li>
                        <li class="nav-link menu-link menu-link_logo">
                            <a class="navbar-brand menu__brand" href="#">
                                <img class="menu-link__img" src="img/hogvarts.png" alt="hogwarts">
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Рейтинг участников</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Личный кабинет</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

现有CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');

*{
    padding: 0;
    margin: 0;
}

body {
    font-family: "Comfortaa";
    background-color: #0C1A22;
}

ul, li {
    display: block;
}

.menu {
    background-color: #fbbe3a;
}

.menu__brand {
    color: black;
    font-weight: 800;
    transition: all 300ms;
}

.menu__brand:hover {
    color: #ff6106;
}

.menu-link__img {
    width: auto;
}

.menu__elements {
    justify-content: space-around;
}

.menu__nav a {
    margin-right: 70px;
    color: black;
    font-weight: 600;
    transition: all 300ms;
}

.menu__nav a:hover {
    color: #ff6106;
}

.statistic {
    margin-top: 40px;
}

.line-red {
    background: linear-gradient(to bottom, #C01712 20%, transparent 20%)
}

.statistic p {
    color: white;
}

@media screen and (max-width: 992px) {
    .menu__nav {
        margin-top: 14px;
    }

    .menu-link_logo {
        display: none;
    }
}

解决方案 #

HTML调整 #

1. 给导航栏加py-0类，清除Bootstrap默认的上下内边距，方便自定义高度
2. 给菜单列表加align-items-center类，让所有菜单项垂直居中
3. 修正logo所在li的类名错误，nav-link属于a标签的类，li应使用nav-item

调整后对应部分代码：

<nav class="navbar navbar-expand-lg menu py-0">
<!-- 中间省略 -->
<ul class="navbar-nav menu__nav align-items-center">
    <!-- 其他菜单项省略 -->
    <li class="nav-item menu-link menu-link_logo">
        <a class="navbar-brand menu__brand" href="#">
            <img class="menu-link__img" src="img/hogvarts.png" alt="hogwarts">
        </a>
    </li>
    <!-- 其他菜单项省略 -->
</ul>

CSS调整 #

修改对应样式规则即可：

/* 自定义菜单高度，数值可按需调整，保证内部元素垂直居中 */
.menu {
    background-color: #fbbe3a;
    height: 60px;
    display: flex;
    align-items: center;
}

/* 调整logo高度，超出菜单的部分会自然外露，符合理想效果，数值按需调整 */
.menu-link__img {
    width: auto;
    max-height: 85px;
}

/* 修正边距规则，避免最后一个菜单项多出右间距 */
.menu__nav .nav-item {
    margin-right: 70px;
}
.menu__nav .nav-item:last-child, 
.menu__nav .menu-link_logo {
    margin-right: 0;
}

调整后即可实现logo居中显示，菜单高度可控，内部元素不会偏移的效果。

内容的提问来源于stack exchange，提问作者Hallteon