在导航栏中居中徽标答案

【问题标题】：Centering logo in nav bar在导航栏中居中徽标
【发布时间】：2014-05-05 14:29:29
【问题描述】：

我很难弄清楚如何使我的徽标在导航栏中居中，并且每边的链接数量不均。

我读到了关于在 CSS 中使用带有浮动属性的 li:nth 子元素的 @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;
    }
}

【问题讨论】：

完全不相关，但您可以在 HTML5 中使用 <nav> 元素来代替 <div id='navbar'>。

标签： html css center

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以试试相对定位，

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

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

问候

【讨论】：

jsfiddle.net/U76Mc 这是一个JSfiddle，我添加媒体查询后发生的一个奇怪的事情是最右边的li，突然它与其他人不符。
一点也不奇怪，您将宽度设置为 100% 并给它一个浮点数：对，如果屏幕尺寸不够大，则元素必然会转到下一行。 ..对于这个问题的解决方案，尝试给 div 一个 %width 而不是常数或 display:none 对于特定的屏幕尺寸。

【解决方案3】：

也许这太疯狂了，但是如果您尝试相对宽度并给树左侧列表项和徽标的宽度分别约为 50% / 3.5 而其余四个右侧项目的宽度为 50% / 4.5 ?

【讨论】：