Question

我一直试图让我的代码工作很长时间，我真的不知道如何放入表单，所以我的徽标将位于导航栏的中间.. 我的链接之间的“差距”也不均匀。

我尝试了这个方法：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;}

Answer 1

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

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

但是我可能会采用另一种方式......如果你在徽标的两边都有偶数个链接，你的方法就有效，但如果它变得不平衡，那么这不会以你想要的方式居中

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

然后我会将两个DIV设置为每个50％的宽度，向左浮动，向右浮动。并且每个都将在其中心端具有等于徽标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;
}

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

Answer 2

您的主要问题是您在<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。 Flexbox使得纵向和横向对齐动态内容变得轻而易举，而无需太多代码。

请参阅此demo。

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

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

Answer 3

我已将您的代码放入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>

如何将导航栏徽标甚至链接彼此居中？

3 个答案: