CSS与<nav>元素：解决国旗图标导致的文本偏移问题

你遇到的问题确实可以用基础CSS属性或简单技巧解决，你的想法完全正确。

现有代码如下：

style.css #

nav { position: sticky; top:0 }
#lang_nav { float: right; margin-right: 5px }
nav, footer { padding:0; text-align: center }

index.html #

<nav>
        <a href="/">home</a>
        <a href="index.fr.html" hreflang="fr"
            id="lang_nav" class="lang_fr">
            <img src="media/fr.png" alt="fr">
        </a>
</nav>

问题根源是：浮动元素#lang_nav会脱离正常文档流，导致<nav>计算文本居中时，没有把浮动图标的宽度算进去，所以原本居中的home链接会被挤得向左偏移。

下面是两种简单有效的修复方法：

方法一：让容器包含浮动元素

给<nav>添加overflow: hidden属性，强制它包含内部的浮动元素，这样<nav>的宽度计算就会覆盖浮动图标的区域，文本就能正确居中：

nav { position: sticky; top:0; overflow: hidden; }
#lang_nav { float: right; margin-right: 5px }
nav, footer { padding:0; text-align: center }

方法二：用Flex布局替代浮动（推荐）

改用Flex布局来实现导航的居中与图标右对齐，这种方式更现代、稳定，也避免了浮动带来的文档流问题：

nav { 
  position: sticky; 
  top: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}
#lang_nav { margin-left: auto; margin-right: 5px; }
nav, footer { padding:0; }

HTML代码不需要修改，Flex布局会自动把home链接居中，同时将国旗图标推到右侧。

相比之下，Flex布局更灵活，后续添加新的导航项也更容易维护，优先推荐使用。

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