div塊中的內容不能垂直對齊

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> ul設置爲相對於容器並將邊距設置爲自動。我不希望有一個固定的邊距或填充，因爲我希望該網站即使在移動設備上也能很好地擴展（因此我爲什麼要使用引導程序）。

我是一個非常業餘的開發人員，只是試圖讓一個網站離開地面，所以我可以展示我的項目從學校和邊演出。

感謝先進的，如果你想看到我的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）可以約束圖像提供給導航欄default高度等在 例2
• 3）又可以實施例3中調整高度和行高像用於 圖像超過導航欄的高度。

**此外，如果使用的是一個預處理器（LESS或SASS）可以很容易地調整高度和其餘部分被處理。

我還插入了HTML，以便您的導航欄在768px下摺疊（Navbar Docs）到移動配置中（不確定是否意味着省略）。

（如果你使用第二或第三選擇只是刪除從導航欄換行*的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>