Html 为什么我的链接不居中?(在菜单栏中)

Html 为什么我的链接不居中?(在菜单栏中),html,css,Html,Css,当我点击菜单栏时,链接未正确居中。我不知道为什么会这样,在哪里。我甚至检查了代码,但不明白。请解释一下我的代码有什么问题。 我很困惑,所以我决定不再尝试了 *{ 填充:0; 保证金:0; } .导航栏{ 背景:灰色; 显示器:flex; } .链接{ 显示器:flex; 证明内容:柔性端; 对齐项目:居中; 保证金权利:5%; } 李{ 列表样式:无; 填充:0.5%0.5%; 保证金权利:5%; } .txt{ 右边距:自动; 字体大小:calc(2vw+1.6rem); 填充:0.5%0.

当我点击菜单栏
时,链接未正确居中。我不知道为什么会这样,在哪里。我甚至检查了代码,但不明白。请解释一下我的代码有什么问题。
我很困惑,所以我决定不再尝试了

*{
填充:0;
保证金:0;
}
.导航栏{
背景:灰色;
显示器:flex;
}
.链接{
显示器:flex;
证明内容:柔性端;
对齐项目:居中;
保证金权利:5%;
}
李{
列表样式:无;
填充:0.5%0.5%;
保证金权利:5%;
}
.txt{
右边距:自动;
字体大小:calc(2vw+1.6rem);
填充:0.5%0.5%;
}
a{
文字装饰:无;
颜色:黑色;
}
/*汉堡包*/
#拨动{
显示:无;
}
标签{
字体大小:32px;
显示:无;
位置:绝对位置;
右:5%;
}
@介质(最大宽度:1000px)
{
李{
保证金:0;
填充:0;
宽度:100%;
}
标签{
显示:块;
光标:指针;
}
.链接{
显示:无;
边际上限:7vh;
宽度:100%;
文本对齐:居中;
}
.链接a{
字体大小:23px;
文字装饰:无;
颜色:rgb(102123145);
线高:50px;
字号:500;
颜色:白色;
}
#切换:选中+链接{
显示:块;
动画:链接1s向前;
}
@关键帧链接{
从{
转化:translateX(-100%);
}
到{
变换:translateX(0);
}
}
}

标志
☰

  • Lorem ipsum dolor坐在amet Concertetur,告别精英。这是我在尼希尔铜酸盐工厂的自由之旅。Accusamus,facere enim别名libero Essentialtibus magni?我们的精神是完全合理的!福吉亚·沃普塔图(Fugiat voluptatum),他是一位来自全人类的动物实验者,他是一位来自德国的研究者?专利发明者的专利权和专利权的必要性。专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权人的专利权。Maiores velit quos magni veritatis Practiceem Nesciut repellat libero voluptates dicta eum eum eius tempora,在小屏幕上设置导航栏的位置:绝对位置,这样它可以占据整个宽度,让内容集中

    也可以使用简单的过渡替换动画:

    *{
    填充:0;
    保证金:0;
    }
    .导航栏{
    背景:灰色;
    显示器:flex;
    位置:相对;/*已添加*/
    z索引:0;/*已添加*/
    }
    .链接{
    显示器:flex;
    证明内容:柔性端;
    对齐项目:居中;
    保证金权利:5%;
    }
    李{
    列表样式:无;
    填充:0.5%0.5%;
    保证金权利:5%;
    }
    .txt{
    右边距:自动;
    字体大小:calc(2vw+1.6rem);
    填充:0.5%0.5%;
    }
    a{
    文字装饰:无;
    颜色:黑色;
    }
    /*汉堡包*/
    #拨动{
    显示:无;
    }
    标签{
    字体大小:32px;
    显示:无;
    位置:绝对位置;
    右:5%;
    }
    @介质(最大宽度:1000px){
    李{
    保证金:0;
    填充:0;
    宽度:100%;
    }
    标签{
    显示:块;
    光标:指针;
    }
    .链接{
    /*增加*/
    位置:绝对位置;
    排名:0;
    左:0;
    z指数:-1;
    背景:继承;
    /**/
    边缘顶端:40px;
    显示:块;
    宽度:100%;
    文本对齐:居中;
    转化:translateX(-100%);
    过渡:1s全部;
    }
    .链接a{
    字体大小:23px;
    文字装饰:无;
    颜色:rgb(102123145);
    线高:50px;
    字号:500;
    颜色:白色;
    }
    #切换:选中+链接{
    变换:translateX(0);
    }
    }
    
    标志
    ☰
    

  • txt
    div占用了左边的空间。
    您可以在
    导航栏上添加
    flex wrap:wrap
    。这将在徽标和图标下方获得
    链接。

  • 元素可能不是
    元素的子元素。编写有效的HTML。因为徽标占用空间there@TemaniAfif哦,是的。。。谢谢你,伙计。。。你知道我下一步该怎么做吗?你真的想要这种突然的效果吗?内容与动画一起跳下?这是一个糟糕的UXIMO@TemaniAfif我知道,但为了我的学习目的,我正在努力理解它。无论如何,谢谢你的时间伙伴。不,不。。。我以前试过绝对位置,但它对我不起作用。链接与其他页面内容重叠。我知道它工作得很好,但我不想重叠链接。@JeetViramgama,所以如果你想得到准确的答案,请分享一个完整的例子。实际上你的问题没有内容,所以。。