リンクを上に置くのではなく、ナビゲーションバーの画像の中央に配置するにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Funky Munky Arcade</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <link rel="stylesheet" type="text/css" href="style.css"> 

    </head> 

    <body> 

     <nav class="navbar navbar-default navbar-fixed-top"> 

      <div class="container"> 

       <div class="navbar-header"> 

        <a href="/index.html" class="navbar-left"><img src="FMA_Logo.png" class="logo"></a> 

       </div> 

        <ul class="nav navbar-nav"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Parties</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 

      </div> 

     </nav> 

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    </body> 
</html>

これまで私がこれまで行ってきたことです。私は現在スタイルがない自分のスタイルシートへのリンクを持っています。今のところhtmlだけです。私はリンクが上になるのではなく、画像の中央にくるようにしようとしています。可能であれば、パディングを使用しないでください。リンクを上に置くのではなく、ナビゲーションバーの画像の中央に配置するにはどうすればよいですか？

出典

2017-04-23 Anthony Hulett

私はどのようにすることができます...あなたはhttps://www.w3.org/Style/Examples/007/center.en.html – Sam

クラスを親に追加し、要素を垂直方向に中央に配置するには、display: flex; align-items: center;に設定します。

.nav-container { 
 
    display: flex; 
 
    align-items: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Funky Munky Arcade</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 

 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 

 
    <div class="container nav-container"> 
 

 
     <div class="navbar-header"> 
 

 
     <a href="/index.html" class="navbar-left"><img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="logo"></a> 
 

 
     </div> 
 

 
     <ul class="nav nav-justified"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Parties</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 

 
    </div> 
 

 
    </nav> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</body> 
 

 
</html>

出典

2017-04-23 23:39:31

おかげでたくさん、1最後の質問を読むことをお勧めします私は今、同じようにリンクを分けることができますか？それはナビの正当化か、それを破滅させるだろうか？ –

@AnthonyHulettはい私の答えを更新 –

リンクを上に置くのではなく、ナビゲーションバーの画像の中央に配置するにはどうすればよいですか？

答えて

関連する問題