div块内的内容不垂直对齐 [英] Content inside a div block not aligning vertically

查看：101
本文介绍了div块内的内容不垂直对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a fixed-top navigation bar with content inside that needs to be center aligned vertically. Additionally, I'm using bootstrap to me design my page. The navigation bar has two major content blocks. One is an image as my nav header and one has a container of an with links.

我包裹的容器没有任何垂直填充，只有边距

The container I wrapped around the two does not have any vertical padding and only has margins for content going underneath it.

<!--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> ul是相对于容器，将边距设置为自动。我不想有一个固定的边距或填充，因为我想要的网站，即使在移动设备上扩展良好（因此为什么我使用引导）。

What I have tried doing is set the .container-fluid>ul to be relative to the container and set the margin to auto. I do not want to have a fixed margin or padding for it since I want the site to scale well even on mobile devices (hence why I'm using bootstrap).

我是一个非常业余的开发人员，只是试图让一个网站离开，所以我可以展示我的项目从学校和侧面演出。

I am a very amateur developer and just trying to get a site off the ground so I can showcase my projects from school and side gigs.

感谢在高级，如果你喜欢看我的CSS。我也可以编辑它。

Thanks in advanced, if you would like to see my CSS. I can edit it in too.

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


推荐答案

处理这取决于什么是最有意义的。

There are multiple ways you can handle this depending on what makes most sense.


  • 1）你实际上可以使用文本，并像第一个
    navbar示例一样用CSS调整。

  • 2）您可以将图像限制为navbars 默认高度，如
    示例2中所示。

  • 3）对于超过导航栏高度的
    图片，您可以像示例3那样调整高度和线高度。

  • 1) You could actually use text and adjust it with CSS like in the first navbar example.
  • 2) You can constrain the image to the navbars default height like in example 2.
  • 3) And you can adjust the height and line height like in example 3 for an image that exceeds the height of the navbar.

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

** Also, if you are using a preprocessor (LESS or SASS) you can easily adjust the height and the rest is handled.

我也插入了HTML，以便导航栏折叠（ Navbar文档）

I also inserted the HTML so your navbar collapses (Navbar Docs)under 768px into the mobile configuration (unsure if the omission was meant or not).

（如果您使用第二或第三选项，只需删除

(if you do use the 2nd or 3rd option just remove the margin-top class from navbar-wrap* so the nav is fixed to the top again.) 

@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块内的内容不垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆