如何使顶部菜单居中

Question

我正在尝试使我的顶级菜单居中

如您所见，我尝试使用填充进行实验，但这仅在每次屏幕尺寸完全相同的情况下才有效。

 #topnav { background-color: #1a1919; overflow: hidden; font-weight: bold; padding-left: 150px; margin: 0px 160px; } #topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #topnav a:hover { color: rgb(26, 131, 22); } #topnav a.active { background-color: #1e7521; color: white; }

 <div id="topnav"> <a href="file:///C:/Users/Haess/OneDrive/Skrivbord/Aromanticism.html">About Aromanticism</a> <a>Where to find out more</a> <a>Forum</a> </div>

另外，我猜我的#topnav a.active 颜色没有显示的原因是我不能只链接到我电脑上的文件，对吧？

Answer 1

a.active 需要是 a: 并且要居中项目使用 flex

 #topnav { background-color: #1a1919; overflow: hidden; font-weight: bold; display:flex; justify-content:center; } #topnav a { color: #f2f2f2; margin:0 20px; text-decoration: none; font-size: 17px; } #topnav a:hover { color: rgb(26, 131, 22); } #topnav a:active { background-color: red; color: white; }

 <div id="topnav"> <a href="file:///C:/Users/Haess/OneDrive/Skrivbord/Aromanticism.html">About Aromanticism</a> <a>Where to find out more</a> <a>Forum</a> </div>

Answer 2

试试这个：

 body { margin: unset; } /* Padding-left and margin properties removed. Text-align added. */ #topnav { background-color: #1a1919; overflow: hidden; font-weight: bold; width: 100%; text-align: center; } /* Float and text-align properties removed. Display added. */ #topnav a { color: #f2f2f2; padding: 14px 16px; text-decoration: none; font-size: 17px; display: inline-block; } #topnav a:hover { color: rgb(26, 131, 22); } #topnav a.active { background-color: #1e7521; color: white; }

 <div id="topnav"> <a href="file:///C:/Users/Haess/OneDrive/Skrivbord/Aromanticism.html">About Aromanticism</a> <a>Where to find out more</a> <a>Forum</a> </div>

Answer 3

不确定您的 html 的结构如何，但您可以尝试这样的方法，

#topnav {
    background-color: #1a1919;
    overflow: hidden;
    font-weight: bold;
    position: absolute; 
    top: amount you want from the top of page;
    left: 50%;
    transform: translateY(-50%)
}