克隆苹果官网导航栏：如何让文字与图标垂直居中对齐？

问题描述 #

练习HTML与CSS克隆苹果官网时，导航栏（Navbar）中的文字和图标位置无法对齐，已设置display:flex和align-items:center但问题仍未解决。

问题分析 #

你的代码存在几个关键问题：

• #nav-bar选择器后有多余的a字符，属于CSS语法错误，会导致后续样式解析异常
• 仅给ul设置了display:flex，但未添加align-items:center来实现垂直居中
• SVG图标设置了height:44px，但文字链接没有对应的垂直对齐设置，且导航栏本身没有定义合适的高度或内边距来容纳内容

修正后的代码 #

CSS部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

#nav-bar{
    background-color: #161617ff;
    padding: 0 16px; /* 增加左右内边距，贴近苹果官网布局 */
}

.nav-links ul{
    display: flex;
    align-items: center; /* 关键：让ul的子元素垂直居中 */
    justify-content: space-between; /* 可选：让导航项均匀分布，还原官网效果 */
    height: 44px; /* 定义导航栏高度，匹配内容容器尺寸 */
}

.nav-links ul li a{
    font-size: 13px;
    color: lightgray;
    padding: 0 9px;
    display: flex; /* 让a内部内容垂直居中 */
    align-items: center;
    height: 100%; /* 让a充满li高度，触发垂直居中效果 */
}

svg{
    fill: lightgray;
    width: 14px; /* 固定图标宽度，避免缩放偏差 */
    height: 14px; /* 调整实际显示高度，与文字行高匹配 */
}

HTML部分

<nav id="nav-bar">
    <div class="nav-links">
        <ul>
            <li>
                <a href="#">
                    <svg viewBox="0 0 14 44" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="m13.0729 17.6825a3.61 3.61 0 0 0 -1.7248 3.0365 3.5132 3.5132 0 0 0 2.1379 3.2223 8.394 8.394 0 0 1 -1.0948 2.2618c-.6816.9812-1.3943 1.9623-2.4787 1.9623s-1.3633-.63-2.613-.63c-1.2187 0-1.6525.6507-2.644.6507s-1.6834-.9089-2.4787-2.0243a9.7842 9.7842 0 0 1 -1.6628-5.2776c0-3.0984 2.014-4.7405 3.9969-4.7405 1.0535 0 1.9314.6919 2.5924.6919.63 0 1.6112-.7333 2.8092-.7333a3.7579 3.7579 0 0 1 3.1604 1.5802zm-3.7284-2.8918a3.5615 3.5615 0 0 0 .8469-2.22 1.5353 1.5353 0 0 0 -.031-.32 3.5686 3.5686 0 0 0 -2.3445 1.2084 3.4629 3.4629 0 0 0 -.8779 2.1585 1.419 1.419 0 0 0 .031.2892 1.19 1.19 0 0 0 .2169.0207 3.0935 3.0935 0 0 0 2.1586-1.1368z"
                        ></path>
                    </svg></a>
            </li>

            <li>
                <a href="#">Store</a>
            </li>
            <li>
                <a href="#">Mac</a>
            </li>
            <li>
                <a href="#">iPad</a>
            </li>
            <li>
                <a href="#">iPhone</a>
            </li>
            <li>
                <a href="#">Watch</a>
            </li>
            <li>
                <a href="#">AirPods</a>
            </li>
            <li>
                <a href="#">Tv ve Ev</a>
            </li>
            <li>
                <a href="#">Eğlence</a>
            </li>
            <li>
                <a href="#">Aksesuarlar</a>
            </li>
            <li>
                <a href="#">Destek</a>
            </li>
            <li>
                <a href="#">
                    <span class="globalnav-image-regular"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 44">
                        <path
                            d="M14.298,27.202l-3.87-3.87c0.701-0.929,1.122-2.081,1.122-3.332c0-3.06-2.489-5.55-5.55-5.55c-3.06,0-5.55,2.49-5.55,5.55 c0,3.061,2.49,5.55,5.55,5.55c1.251,0,2.403-0.421,3.332-1.122l3.87,3.87c0.151,0.151,0.35,0.228,0.548,0.228 s0.396-0.076,0.548-0.228C14.601,27.995,14.601,27.505,14.298,27.202z M1.55,20c0-2.454,1.997-4.45,4.45-4.45 c2.454,0,4.45,1.997,4.45,4.45S8.454,24.45,6,24.45C3.546,24.45,1.55,22.454,1.55,20z"
                        ></path>
                    </svg>
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="globalnav-image-regular"><svg viewBox="0 0 14 44" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="m11.3535 16.0283h-1.0205a3.4229 3.4229 0 0 0 -3.333-2.9648 3.4229 3.4229 0 0 0 -3.333 2.9648h-1.02a2.1184 2.1184 0 0 0 -2.117 2.1162v7.7155a2.1186 2.1186 0 0 0 2.1162 2.1167h8.707a2.1186 2.1186 0 0 0 2.1168-2.1167v-7.7155a2.1184 2.1184 0 0 0 -2.1165-2.1162zm-4.3535-1.8652a2.3169 2.3169 0 0 1 2.2222 1.8652h-4.4444a2.3169 2.3169 0 0 1 2.2222-1.8652zm5.37 11.6969a1.0182 1.0182 0 0 1 -1.0166 1.0171h-8.7069a1.0182 1.0182 0 0 1 -1.0165-1.0171v-7.7155a1.0178 1.0178 0 0 1 1.0166-1.0166h8.707a1.0178 1.0178 0 0 1 1.0164 1.0166z"
                        ></path>
                    </svg></span>
                </a>
            </li>
        </ul>
    </div>
</nav>

关键修改说明 #

1. 修复#nav-bar后的语法错误，确保样式正常解析
2. 给nav-links ul添加align-items:center并设置固定高度，让所有导航项垂直居中
3. 给a标签设置display:flex和align-items:center，同时让a充满li高度，确保文字与图标在同一垂直位置
4. 调整SVG实际显示高度为14px，原代码中height:44px是viewbox尺寸，并非图标实际显示大小，会导致图标过大偏移

内容的提问来源于stack exchange，提问作者Berk Bıçakcı