如何在div导航栏中实现a标签居中并适配后续svg图标

你当前的对齐问题根源是使用float实现布局，float本身不擅长处理垂直方向的对齐需求，且内部的<h1>标签默认带上下margin，进一步拉大了左右元素的对齐偏差。改用Flex布局可以完美解决这个问题，后续添加svg图标也能自动垂直对齐，不需要额外调整。

调整后的CSS代码 #

/*
 Navigation
*/

.topnav {
    /* 改用flex布局 */
    display: flex;
    /* 左右两端对齐 */
    justify-content: space-between;
    /* 子元素垂直居中，svg、文字都能自动对齐 */
    align-items: center;
    /* 统一设置导航栏上下内边距，控制整体高度 */
    padding: 14px 16px;
    background: none !important;
}

.topnav button {
    border: none;
    cursor: pointer;
}

/* 右侧导航链接的容器 */
.topnav .nav-links {
    display: flex;
    gap: 32px; /* 控制导航项之间的间距，可自行调整 */
}

.topnav a {
    color: #0f1;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

/* 重置h1默认边距 */
.topnav h1 {
    margin: 0;
    font-size: 24px; /* 可以根据需要调整标题字号 */
}

.topnav a:hover {
    color: #000;
}

.topnav a.active {
    color: #000;
}

调整后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grundfos Metrics</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
    <link rel="stylesheet" href="./css/site.scss">
    <script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
    <header>
        <div class="topnav">
            <!-- 左侧标题 -->
            <a href="#news"><h1>Website Title</h1></a>
            <!-- 右侧导航链接组 -->
            <div class="nav-links">
                <a class="active" href="#home">Home</a>
                <a href="#news">Archives</a>
                <a href="#contact">Coverage</a>
            </div>
        </div>
    </header>
</body>
</html>

修改后无需额外配置即可实现所有元素垂直居中对齐，后续添加svg图标时，直接插入到对应位置即可，align-items: center属性会自动完成svg和文字的对齐，不需要额外写vertical-align规则。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup