如何使导航栏徽标甚至彼此之间的链接居中？答案

【问题标题】：How to center navigation bars logo and even links from each other?如何使导航栏徽标甚至彼此之间的链接居中？
【发布时间】：2015-05-07 13:14:39
【问题描述】：

我一直在努力让我的代码工作很长时间，但我真的不知道如何输入表单，所以我的徽标会在导航栏的中间.. 我的链接之间的“差距”也没有。

我试过这个方法：Centered navigation bar and links

但它没有帮助。

这是我的代码：

<body>
    <div class="nav">
        <div class="nav-centered">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Art</a></li>
            <li><a class="logo" href="#"></a></li>
            <li class="active"><a href="#">About Me</a><li>
            <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </div>

    </nav>

和css：

.nav {
margin-top:200px;
height:120px;
background-color:#B0A2BC;
}

.nav ul {
margin: 0;
padding:0;
width:100%;
display:inline-block;
}

.nav ul li{
list-style:none;
float:left;
width: 20%;
text-align:center;
}

.nav ul li a{
padding:0;
margin:0;
width:100%;
text-align:center;
display:block;
padding:45px 80px;
font-weight:bold;
font-size: 21px;
color:white;
text-decoration: none;
}

.logo {
background:url("logo1.gif");
background-repeat: no-repeat;
height:140px;


}

.nav ul li a:hover, .nav ul li.active a {
color:purple;

}
.nav-centered{
display:table;
margin:0 auto;}

【问题讨论】：

标签： html css uinavigationbar

【解决方案1】：

我认为您的问题是您将导航中的 li 元素浮动到左侧：

.nav ul li{
  list-style:none;
  float:left;        <------ here.
  width: 20%;
  text-align:center;
}

但我可能会以另一种方式处理...如果您在徽标的任一侧有偶数个链接，您的方法有效，但如果它变得不平衡，那么这将不会以您想要的方式居中。

我可以通过制作一个仅包含徽标的居中 DIV 来解决此问题，并将其宽度设置为徽标的宽度（加上您可能想要的任何呼吸空间）。

然后我将两个 DIV 设置为每个 50% 的宽度，浮动到左侧，一个浮动到右侧。并且每个中心端的填充都等于徽标 DIV 宽度的一半。将文本在左半 div 中右对齐，在右半 div 中左对齐。

最后，将浮动 DIV 的上边距设置为负值，等于居中 DIV 高度的一半左右。

示例。 HTML：

<div class="logo">
  <a href="home/page/linnk.html"><img src="logoimage.png" width="200" height="200" alt="Your Logo Name" /></a>
</div>
<div class="nav left">
  <ul> ... </ul>       <----- Left-hand links here
</div>
<div class="nav right">
  <ul> ... </ul>       <----- Right-hand links here
</div>

在你的 CSS 中：

div.logo {
  width: 240px;
  height: 200px;
  margin: auto;    <---- to center your logo DIV
  z-index: 10;     <---- make sure the logo DIV is layered above
  text-align: center;   <---- make sure your logo is centered in the DIV.  
                              Alternatively you can use padding
}

div.nav ul { ... } <---- rules to make your UL inline here
div.nav li { ... } <---- and here

div.nav {
  width: 50%;
  margin-top: -100px;     <---- adjust this until it is
                                centered vertically the way you'd like
  z-index: 5;     <---- make this less than the logo DIV
}

div.nav.left {
  float:left;
  text-align: right;
  padding-right: 120px;
}

div.nav.right {
  float:right;
  text-align: left;
  padding-left: 120px;
}

使用这种方法，您的徽标将始终居中，无论您在两侧放置多少链接。

【讨论】：

非常感谢！你解释得很好，所以即使是像我这样的初学者也能理解！ :) 我现在就试试看是否有帮助。

【解决方案2】：

我已将您的代码放入 jsfiddle。你需要它是流动的吗？如果不看看这个小提琴。 * 间隙不是——甚至是因为您按照@zgood 所说添加的填充。

https://jsfiddle.net/7vkk22w0/2/

.nav {
    margin: 10px auto 0;
    height: 120px;
    background-color: #B0A2BC;
    width: 1000px;
}

.nav ul {
    margin: 0;
    padding: 0;
}

.nav ul li {
    list-style: none;
    display: inline;
    float: left;
    width: 20% ;
}

.nav ul li a {
    padding: 0;
    margin: 0;
    text-align: center;
    display: block;
    line-height: 120px;
    font-weight: bold;
    font-size: 21px;
    color: white;
    text-decoration: none;
}

.logo {
    background: url("logo1.gif");
    background-repeat: no-repeat;
    height: 140px;
}
.nav ul li a:hover, .nav ul li.active a {
        color: purple;
    }
.nav-centered {
    display: table;
    margin: 0 auto;
}

<div class="nav">

    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Art</a></li>
        <li><a class="logo" href="#"></a></li>
        <li class="active"><a href="#">About Me</a><li>
        <li><a href="#">Contact</a></li>
    </ul>

</div>

【讨论】：

我也试过了，标志几乎在中间！它与我的徽标（高度/宽度？）或仅与代码有关吗？现在的样子如下：aijaa.com/QbEBqo
尝试添加：margin: 0 auto;到您的徽标选择器
它没有移动到任何地方:(
哦，我拿走了 text-align:center;现在看起来我的标志在中间！感谢您的帮助！ :)
欢迎您，您可以通过投票给给定的答案或选择一个答案来提供帮助；)

【解决方案3】：

您的主要问题是您在<a> 标签上设置的大量填充（以及display: block。这个：

.nav ul li a{
   display:block;
   padding:45px 80px;
}

为了获得您想要的对齐方式，我制作了一个演示 here。我从<a> 中删除了这个填充，并使用display:table 方法来实现垂直对齐的内容。

主要的样式更改是将display:table;添加到您的<ul>，然后将display:table-cell;和vertical-align:middle;添加到您的<li>。 text-align:center; 已经存在，因此涵盖了水平对齐。我还删除了<div class="nav-centered">，因为它不需要。

弹性盒

如果可以，另一种方法是使用flexbox。 Flexbox 使垂直和水平对齐动态内容变得轻而易举，无需太多代码。

看到这个demo。

.nav ul {
    height:100%;
    display:flex;
    align-items:center;
}

只需将display:flex; 和align-items:center 添加到您的<ul> 即可满足您的需求。这就是你所需要的......看看演示......

【讨论】：

我试过了，它几乎解决了这个差距问题。这个栏的中间应该有我的标志+我用那个填充物来获取这个紫色区域中间的文本。抱歉，我的编码解释很糟糕，因为我刚开始编码：D 这是现在的样子：aijaa.com/EeVzMB