Navbar品牌与两行文字，垂直居中

Question

我有一个导航栏navbar品牌的文本导航栏。

我想有导航栏，品牌在两行文本和两个垂直居中，但我只做到了第一线垂直居中，而不是两个......

下面走一段小提琴

https://jsfiddle.net/Naima/qksxkw1e/

<header> 
    <nav class='navbar navbar-default navbar-fixed-top' role='navigation'> 
     <div class='container-fluid'> 
      <div class='navbar-header'> 
       <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#collapse'> 
        <span class='sr-only'>Toogle navigation</span> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
        <span class='icon-bar'></span> 
      </div> 
      <div class='navbar-brand'><span class='navbar-title'>Title<br>This is the subtitle</span> 
      </div> 
      <div class='collapse navbar-collapse' id='collapse'> 
        <ul class='nav navbar-nav navbar-right'> 
        <li><a href='#featured'>Example 1</a></li> 
        <li><a href='#bla'>Example 2</a></li> 
        <li><a href='#blabla'>Example 3</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

Answer 1

短的方式来实现对给定的配置想要的效果是使用CSS转换是这样的：

.navbar-brand { 
 
    -ms-transform: translateY(-35px); 
 
    -o-transform: translateY(-35px); 
 
    -moz-transform: translateY(-35px); 
 
    -webkit-transform: translateY(-35px); 
 
    transform: translateY(-35px); 
 
} 
 
@media (min-width: 768px) { 
 
    header .navbar-default { 
 
    padding: 20px; 
 
    } 
 
    .navbar-brand { 
 
    -ms-transform: translateY(-7px); 
 
    -o-transform: translateY(-7px); 
 
    -moz-transform: translateY(-7px); 
 
    -webkit-transform: translateY(-7px); 
 
    transform: translateY(-7px); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<header> 
 
    <nav class='navbar navbar-default navbar-fixed-top' role='navigation'> 
 
    <div class='container-fluid'> 
 
     <div class='navbar-header'> 
 
     <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#collapse'> <span class='sr-only'>Toogle navigation</span> 
 
      <span class='icon-bar'></span> 
 
      <span class='icon-bar'></span> 
 
      <span class='icon-bar'></span> 
 

 
     </div> 
 
     <div class='navbar-brand'><span class='navbar-title'>Title<br>This is the subtitle</span> 
 

 
     </div> 
 
     <div class='collapse navbar-collapse' id='collapse'> 
 
     <ul class='nav navbar-nav navbar-right'> 
 
      <li><a href='#featured'>Home</a> 
 

 
      </li> 
 
      <li><a href='#download'>Download</a> 
 

 
      </li> 
 
      <li><a href='#order'>Order</a> 
 

 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>

如果您需要别的东西，评论。如果有帮助，+1。