Question

我想在中心创建一个带有徽标的导航栏，并在两侧创建两个导航栏项（链接），宽度等于间距。我还需要将徽标与导航栏项目对齐。

这是我到目前为止的代码。我使用bootstrap。

HTML：

<div class="nav">
<div class="container">
<ul>
<li> <a href="#">Navbaritem1 </a> </li>
<li> <a href="#"> Navbaritem2 </a> </li>
</ul>


<div class="logo">
<img src="Img/logo.png" class="img-responsive">
</div>

<ul>
    <li> <a href="#"> Navbaritem3 </a> </li>
    <li> <a href="#"> Navbaritem4 </a> </li>
</ul>
</div>
</div>

CSS：

.nav li {
display: inline;
margin-left:5%;
margin-right:5%;
}

.logo {
width: 100px;
display: inline-block;
height: auto;
}

.logo img {

float: none;
padding-top:10%;
}

ul {
display: inline;
text-align:center;
width:30%;
}

Answer 1

您是否尝试将div放在容器内？

<div class="container">
  <div class="center">
  Centered content here
  </div>
</div>

和css：

.center {
  display: table;
  margin: 0 auto;
}

同样this post可能会帮助您快速搜索。

我在制作一个中心带有徽标的导航栏时遇到了麻烦，两侧的两个链接间距相等

1 个答案: