Question

我有一个固定顶部的导航栏，里面的内容需要垂直居中对齐。另外，我正在使用bootstrap来设计我的页面。导航栏有两个主要内容块。一个是图像作为我的导航标题，一个是带有链接的容器。

我缠绕在两者上面的容器没有任何垂直填充，只有内容下方的边距。

<!--Navigation Bar-->
    <nav class="navbar navbar-default navbar-fixed-top navbar-wrap">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="img/logo.png" />
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#about">Who Am I?</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

我尝试做的是将.container-fluid＆gt; ul设置为相对于容器并将边距设置为auto。我不希望有固定的边距或填充，因为我希望网站即使在移动设备上也能很好地扩展（因此我使用bootstrap）。

我是一个非常业余的开发人员，只是想让一个网站开始，所以我可以从学校和旁边的演出中展示我的项目。

先谢谢你，如果你想看看我的CSS。我也可以编辑它。

http://imgur.com/pXcwav3

.navbar-wrap {
    padding: 0;
    background-color: #77B69C;
}

.nav {
    padding-right: 15px;
}

.navbar-right {
    margin-right: 0;
}

.container-fluid>ul {
    position: relative;
    height: 100%;
    margin: auto;
}

.navbar-default .navbar-nav>li>a {
    color: #ECF0F1;
    border-radius: 5px;
    transition: background-color 0.5s;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #171F26;
    background-color: #fff;
}

Answer 1

根据最有意义的方法，有多种方法可以解决这个问题。

1）您实际上可以使用文本并使用CSS调整它，就像在第一个中一样 navbar示例。
2）您可以将图像约束到导航栏default高度，如同例2。
3）你可以调整高度和线高，如例3所示超出导航栏高度的图像。

**此外，如果您使用预处理器（LESS或SASS），您可以轻松调整高度，其余部分将被处理。

我还插入了HTML，以便导航栏在768px下折叠（Navbar Docs）到移动配置中（不确定是否有遗漏）。

（如果您使用第二个或第三个选项，只需从navbar-wrap *中删除margin-top类，以便导航再次固定在顶部。）

@import url(https://fonts.googleapis.com/css?family=Hind+Vadodara);

/**Text CSS**/

.navbar.navbar-wrap {
  background: #77B69C;
}
.navbar a.navbar-brand,
.navbar a.navbar-brand:hover,
.navbar a.navbar-brand:focus {
  font-family: 'Hind Vadodara', sans-serif;
  font-size: 30px;
  color: #000;
  letter-spacing: 5px;
}
.navbar .navbar-brand span.lname {
  color: #fff;
}
.navbar.navbar-wrap .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap .navbar-right {
    margin-right: 15px;
  }
  .navbar.navbar-wrap .navbar-brand {
    margin-left: 15px;
  }
}
/**IMG CSS**/

.navbar.navbar-wrap2 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap2 .navbar-brand img {
  height: 50px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap2 {
  background: #77B69C;
  margin-top: 200px;
}
.navbar.navbar-wrap2 .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap2 .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
.navbar.navbar-wrap2 .navbar-brand img {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap2 .navbar-right {
    margin-right: 15px;
  }
}
/**LARGE IMG CSS**/

.navbar.navbar-wrap3 .navbar-brand {
  padding: 0;
  margin: 0;
}
.navbar.navbar-wrap3 .navbar-brand img {
  height: 75px;
  width: 300px;
  padding: 0;
  margin: 0;
  left: 0;
}
.navbar.navbar-wrap3 {
  background: #77B69C;
  margin-top: 400px;
}
.navbar.navbar-wrap3 .navbar-header {
  height: 75px;
}
.navbar.navbar-wrap3 .navbar-toggle {
  margin-top: 20px;
}
.navbar.navbar-wrap3 .navbar-nav > li > a {
  font-family: 'Hind Vadodara', sans-serif;
  color: #ECF0F1;
  border-radius: 5px;
  transition: background-color 0.5s;
}
.navbar.navbar-wrap3 .navbar-nav > li > a:hover {
  color: #171F26;
  background-color: #fff;
}
.navbar.navbar-wrap3 .navbar-brand img {
  margin-left: 15px;
}
@media (min-width: 768px) {
  .navbar.navbar-wrap3 .navbar-right {
    margin-right: 15px;
  }
  .navbar.navbar-wrap3 .navbar-nav > li > a {
    line-height: 45px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-wrap navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#"><span class="fname">James</span> <span class="lname">Wong</span></a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap2 navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<hr>
<nav class="navbar navbar-default navbar-wrap3 navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://academe.co.uk/wp-content/uploads/2014/10/sugarcrmLogoWhiteBackground_RGB.png" />
      </a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-nav3">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Who Am I?</a>

        </li>
        <li><a href="#projects">Projects</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

div块内的内容未垂直对齐

1 个答案: