一个导航栏

嘿，我有在中间的品牌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

回答

相关问题