div块中的内容未垂直对齐

Question

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

我包裹在这两个容器上的容器没有任何垂直填充，而在下面的内容只有空白。

<!--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设置为相对于容器，并将裕度设置为auto。 我不想为此设置固定的边距或填充，因为我希望该站点即使在移动设备上也能很好地扩展（因此，为什么要使用引导程序）。

我是一个非常业余的开发人员，只是想开辟一个网站，这样我才能展示来自学校和其他演出的项目。

非常感谢您，如果您想看我的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对其进行调整。
• 2）您可以像示例2一样将图像限制为导航栏的default高度。
• 3）对于超过导航栏高度的图像，您可以像示例3一样调整高度和线条高度。

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

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

（如果您确实使用了2nd或3rd选项，只需从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>