질문

저의 Top 메뉴를 중앙으로 만들려고합니다

보시다시피 패딩을 실험 해 보았지만 화면이 매번 정확히 같은 크기 인 경우에만 작동합니다.

#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>

Expand snippet

또한 내 #topnav a.active 색상이 표시되지 않는 이유는 내 컴퓨터의 파일에 연결할 수 없기 때문이라고 생각합니다.

답변1

이것을 시도하십시오 :

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>

Expand snippet

답변2

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>

Expand snippet

답변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%)
}

출처 : https://stackoverflow.com/questions/63179163/how-to-make-a-top-menu-central