Question

我很难弄清楚如何将导航栏中的徽标居中，每边都有不均匀的链接。

我读到了在CSS中使用带有浮动属性的li：nth child的@media查询来解决这个问题，但是我无法做到这一点。

请记住，导航链接应该朝向屏幕的中心而不是侧面（不像这样：Navigation Bar with centered Logo）。

这是我的代码：

<header>
<div id="navbar">

        <ul>

            <li><a href="#minigolf"><div id="minigolfdiv" class="navdiv">MINIGOLF</div></a></li>

            <li><a href="#bowling"><div class="navdiv">BOWLING</div></a></li>

            <li><a href="#arrangementer"><div class="navdiv">ARRANGEMENTER</div></a></li>

            <li><a href="#"><div class="navdiv"><h2 id="logo">Funcity sport</h2></div></a></li>

            <li><a href="#priser"><div class="navdiv">PRISER</div></a></li>

            <li><a href="#aabningstider"><div class="navdiv">ÅBNINGSTIDER</div></a></li>

            <li><a href="#madogdrikke"><div class="navdiv">MAD & DRIKKE</div></a></li>

            <li><a href="#kontakt"><div class="navdiv">KONTAKT</div></a></li>

        </ul>

</div>

header{
display:block;
width:100%;
height:70px;
background-color:red;
}

#navbar{
display:inline-block;
height:70px;
width:auto;
float:left;
}

.navdiv{
height:100%;
width:100%;
padding: 0 10 0 10;
background-color:white;
border: 1px solid;
}

#logo{
background:url("media/logo.png") center no-repeat;
width:220px;
height:70px;
text-indent:-9999999999px;
margin: 0 0 0 0;
}

#minigolf, #bowling, #arrangementer, #priser,
#aabningstider, #madogdrikke{
height:1000px;
background-color:blue;
}

ul{
margin:0 0 0 40px;
padding:0 0 0 0;
list-style-type:none;
}

li{
display:inline-block;
height:70px;
background-color:white;
margin:0 0 0 0;
vertical-align:middle;
line-height:70px;
}

@media (min-width: 500px) {

    .navdiv li:nth-child(1), .navdiv li:nth-child(2), .navdiv li:nth-child(3){
        float:left;
    }

    .navdiv li:nth-child(5), .navdiv li:nth-child(6), .navdiv li:nth-child(7),      li:nth-child(8){
        float:right;
    }
}

Answer 1

您可以尝试相对定位，

#logo { position: relative; top: 10px; // or any value you want. }

或者只是在JSfiddle上传一个例子，我可以看到实际的问题。而不是实际的图像只是得到div的恒定宽度和高度。

此致

Answer 2

也许这太过于狂野，但是如果你尝试相对宽度并给树左侧列表项和徽标宽度约为50% / 3.5，其余四个右侧项宽度为{ {1}}？

Answer 3

首先，您的代码语义不正确。 A（块元素）不能包装在（内联元素）

中

HTML：

<nav>
     <span>
          <a href="#minigolf">MINIGOLF</a>
          <a href="#minigolf">MINIGOLF</a>
     </span>
    <a href='logo' id="logo">logo</a>
     <span>
          <a href="#minigolf">MINIGOLF</a>
          <a href="#minigolf">MINIGOLF</a>
     </span>
</nav>

CSS：

nav { 
width: 100%; 
position: relative; 
display: block; 
}
nav span { 
float: left; 
width: 50%; 
box-sizing: border-box;  
}
nav span:first-child { 
padding-right: 50px; /* half the logo width */ 
}
nav span:last-child { 
padding-left: 50px; /* half the logo width */ 
}
#logo { 
width: 100px; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
margin: auto; 
display: block; 
}

导航栏中居中徽标

3 个答案: