Navbar의 마진 : 자동,

난 그냥 간단한 HTML이 작동하지 않습니다Navbar의 마진 : 자동,

<body> 
    <header id="cabecalho"> 
     <nav id="menu"> 
      <ul> 
      <li>Home</li> 
      <li>Projects</li> 
      <li>Contact</li> 
      </ul> 
     </nav> 
    </header> 
</body>

CSS :

<style> 
      *{ 
       padding: 0; 
       margin: 0;  
      } 
      html{ 
       width: 100%; 
       height: 100%; 
      } 
      body{ 
       width: 100%; 
       height: 100%; 
      } 
      header#cabecalho{ 
      width: 100%; 
      height: 5%; 
      background-color: rgb(60, 92, 86); 
      overflow: hidden; 
      } 
      nav#menu{ 
      display: block; 
      height: 50%; 
      width: 100%; 
      overflow: hidden; 
      margin-top: auto; 
      margin-bottom: auto; 
      } 
      nav#menu ul{ 
      height: 100%; 
      width: 100%; 
      list-style: none; 
      } 
      nav#menu ul li{ 
       display:inline-block; 
       color: white; 
      } 


     </style>

난 그냥 수직 중앙에서 헤더의 메뉴를 원하지만, 그것은에 계속 그것의 꼭대기. obs : 여백 사용 : x 픽셀 작동하지만이 문제를 해결하는 가장 좋은 방법이라고 생각하지 않습니다.

출처

2017-12-23 Pedro leal

https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers –

https://stackoverflow.com/questions/356809/best-way-to -center-a-div-on-a-page-vertical-and-horizontally –

https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1 –

여러 가지 방법으로 해결할 수 있습니다.

nav 및 표적을 대상으로하고 position: relative;으로 지정합니다. 그런 다음 메뉴를 top: 50%; 및 transform: translate(-50%);

으로 이동합니다. 이렇게하면 메뉴가 머리글의 50 % 아래로 이동하여 다시 원래 높이의 50 %까지 당깁니다. 가운데 정렬 된 메뉴 결과.

텍스트를 메뉴 가운데에 가운데 놓으려면 ul에 대해 동일한 작업을 수행하는 것이 좋습니다.

참고로 JS fiddle을 볼 수는 있지만 메뉴에 배경을 추가하고 쉽게 볼 수 있도록 헤더를 더 크게 만들었습니다.

출처

2017-12-23 14:17:02

방법 질문이 닫힌 후에 대답을 추가 할 수 있었습니까? –

감사합니다! 이게 정말 도움이되었습니다! –

@TemaniAfif 닫히기 전에 대답을하기 시작 했음 –

답변

관련 문제