ナビゲーションバーのマージン：オートは、

が、私は単純なHTMLを持って動作しません：ナビゲーションバーのマージン：オートは、

<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：marginを使用する：x Pixelsは機能しますが、これを処理するための最良の方法ではないと思います。

出典

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とheaderをターゲットにしてposition: relative;とします。次に、メニューをtop: 50%;とtransform: translate(-50%);

に移動させると、メニューがヘッダーの50％下に移動し、それを元の高さの50％上に戻します。中央にメニューが表示されます。

テキストをメニューの中央に配置したい場合は、ulの場合も同じことをお勧めします。

参照番号JS fiddleを参照してください。ただし、メニューに背景を追加し、見やすくするためにヘッダーを大きくしていることに注意してください。

出典

2017-12-23 14:17:02

どのようにあなたは質問が閉じられた後に回答を追加できましたか？ –

ありがとう！これは本当に私を助けました！ –

@TemaniAfifそれが閉鎖される前に私は答えを出し始めたと思う。 –

ナビゲーションバーのマージン：オートは、

答えて

関連する問題