CSS 和 <nav> ：防止从填充中插入国家（国旗）图标

Question

我正在维护一个非常简单的静态网页，用于显示我的简历。我想在

元素中实现一个语言切换器，以便访问者可以选择两种语言中的任何一种。这会稍微扰乱原本居中的文本。

样式.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>

我非常有信心应该有一个基本的 CSS 属性或简单的 hack 来解决这个问题。难道我错了？

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

<nav >
        <a href="/"></a>
        <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>

Answer 1

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

<nav >
        <a href="/"></a>
        <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>