navbar内のリンクを移動する

Question

ちょっと私は真ん中にブランドimgを持つnavbarを持っていますが、画像はリンク内の実際のテキストよりも大きくなっています。私はブランドの両側にリンクを持っていたいと思っています）ブランドの真ん中（縦方向の中間点）とマッチするようにマージンとパディングで試してみましたが、トリックをしているようには見えません。

ナビゲーションバーのHTML：

<div class="nav"> 
     <div class="li"> 
      <a class="nav-link" href="#">PHOTOGRAPHER</a> 
      <a class="nav-link" href="#">PORTFOLIO</a> 
      <a class="hplogo-a" href=""><img class="hplogo-size" src="Images/Logo-Black - Copy.png" alt=""></a> 
      <a class="nav-link" href="#">INVESTMENT + FAQ</a> 
      <a class="nav-link" href="#">BLOG</a> 
     </div> 
    </div> 

関連CSS（私はロゴをしたときと同じに残ったので、空きスペースが両側にあったので、私はコンテナのサイズではなく、ロゴをリセットするに注意してください）：

.nav{ 
    list-style-type: none; 
    overflow:hidden; 
    display: inline; 

} 
.li{ 
    text-align: center; 

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

.flex-item { 
    margin: 5px; 
} 
.resize-anchor{ 
    display: inline-block; 
    height: auto; 
    width: 300px; 
} 
.hplogo-a{ 
    display: inline-block; 
    height: auto; 
    width: 200px; 
} 
a{ 
    display:inline-block; 
    color:black; 
    text-decoration: none; 
    white-space: nowrap; 
} 
a:hover{ 
    color:#D1946F; 
    text-decoration: none; 
} 

a:link{ 
    color:#D1946F; 
    text-decoration: none; 
} 
.nav-link{ 
    margin:0px 10px 30px 10px; 
    font-family: Calibri; 
    font-size: 18px; 
    font-style: normal; 
    font-variant: normal; 
    line-height: 26.4px; 
    padding: 0px 10px 0px 10px; 
    margin-top: 20px; 
} 

Answer 1

これはフレックスボックスの仕事のようです。

は単に...

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

.flex-item { 
    margin: 5px; 
} 

をごdivネストしたクラスflex-containerとそのaのクラスflex-item ...

<div class="nav"> 
    <div class="li flex-container"> 
    <a class="nav-link flex-item" href="#">PHOTOGRAPHER</a> 
    <a class="nav-link flex-item" href="#">PORTFOLIO</a> 
    <a class="hplogo-a flex-item" href=""><img class="hplogo-size" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png" alt=""></a> 
    <a class="nav-link flex-item" href="#">INVESTMENT + FAQ</a> 
    <a class="nav-link flex-item" href="#">BLOG</a> 
    </div> 
</div> 

を与え、あなたのページのCSSに以下のプロパティを設定します。..とボイル！

フレックスボックスの詳細については、clicking hereをお勧めします。フレキシブルボックスは非常に便利です。

は、ここでアクションのコードだ（私はフルページでそれを実行することをお勧め）：

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

 
.flex-item { 
 
    margin: 5px; 
 
}

<div class="nav"> 
 
    <div class="li flex-container"> 
 
    <a class="nav-link flex-item" href="#">PHOTOGRAPHER</a> 
 
    <a class="nav-link flex-item" href="#">PORTFOLIO</a> 
 
    <a class="hplogo-a flex-item" href=""><img class="hplogo-size" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png" alt=""></a> 
 
    <a class="nav-link flex-item" href="#">INVESTMENT + FAQ</a> 
 
    <a class="nav-link flex-item" href="#">BLOG</a> 
 
    </div> 
 
</div>

は私がよりよい垂直方向の配置を強調するためにかなり大きなロゴイメージを使用していました。

Answer 2

は卿がうまくいけば私の答えは、私はそれはあなたがあなたのナビゲーションバーの中央にナビゲーションをしたい何を得るあなたのために有用である

ここ

<div class="navbar"> 


    <nav class="nav"> 
     <ul class="ul"> 
      <li> <a class="nav-link" href="#">PHOTOGRAPHER</a></li> 
      <li><a class="nav-link" href="#">PORTFOLIO</a></li> 
      <li><a class="hplogo-a" href=""><img class="hplogo-size" src="https://s-media-cache-ak0.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt=""></a></li> 
      <li><a class="nav-link" href="#">INVESTMENT + FAQ</a></li> 
      <li><a class="nav-link" href="#">BLOG</a></li> 
     </ul> 
     </nav> 
     </div> 

は、CSS

ここ

 .navbar{float: left;width: 100%;position: relative;} 
     .nav{float: left;position: absolute;left:50%;transform:translate(-50% , 0);} 
     .hplogo-size{width:50px;height:50px;} 
     .nav ul{list-style:none;} 
     .nav ul li{text-decoration: none;display: inline-block;} 

あるFiddle