一個導航欄

嘿，我有在中間的品牌IMG一個導航欄，但圖像與鏈接的實際文本更大的範圍內移動的鏈接。我想擁有的品牌IMG兩側的鏈接））與品牌的中間（垂直中點），我試圖與margin和padding打去排隊，但它似乎並沒有做的伎倆。導航欄的一個導航欄

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; 
}

來源

2017-10-20 BrownBoii333

你可以發佈你嘗試過的CSS嗎？也許創建一個https://jsfiddle.net或http://plnkr.co？形象有多大？在實際圖像周圍是否有透明/空白區域，或者文件是否緊貼徽標？ –

此外，文件名不能包含空格，所以你的形象的名字「徽標，黑色 - Copy.png」應該是「標誌，黑Copy.png」代替。 –

編輯你的問題，並添加你試過的相關CSS。 –

這看起來像一個彎曲中的作業！

只需給你的嵌套div類flex-container及其a S中的類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 ...

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

.flex-item { 
    margin: 5px; 
}

..瞧！

我強烈建議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>

我用了一個相當大的標誌形象，以更好地強調垂直對齊方式。

來源

2017-10-20 05:06:38

感謝@Brent帕帕斯，但現在當我改變窗口大小的IMG變小了。我的猜測是，這與flex如何與我自己放置的大小調整行動有關，因爲你似乎沒有這樣做，但調整img大小是必要的。我嘗試了幾件事，但他們沒有奏效。 – BrownBoii333

這很奇怪。我試圖重新創建你的描述，但我不能。我唯一的猜測是，也許你可以嘗試在img上設置最小寬度的屬性，以防止它變小？ –

我可以嘗試製作一個jsfiddle或任何它的名字。如何添加僅存在於像Images文件夾中的圖像？因爲這是我沒有做到的唯一原因。 – BrownBoii333

先生希望我的答案是有幫助的你，我得到它，你想在你的導航欄中間的導航

<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

來源

2017-10-20 05:14:26

回答

相關問題