boostrap導航欄中的文本

-1

我知道有很多關於垂直對齊主題的帖子，但我仍然遇到一些問題。我有一個導航欄，我已將高度從默認改爲64px。它的一切都調整到了這個高度。我有一些下拉菜單，如下所示：boostrap導航欄中的文本

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Sample Text <span class="caret"></span> 
     </a> 
     <div class="dropdown-menu> 
      <h6>Text</h6> 
      <ul> 
       <!--some li elements--> 
      </ul> 
     </div> 
    </li> 
    <!--some more li elements--> 
</ul>

我遇到的問題是，雖然頂級UL的一個元素裏的具有導航欄的高度，併爲框內容垂直居中（相同的填充頂部和底部），其中的文本不在包含它的框中居中。相反，它被推入左上角（不是a元素，而是包含在填充內的框）。我已經使用Chrome開發人員工具對此進行了驗證。我想知道爲什麼文本不是垂直居中，我怎麼能這樣做。

編輯：3210無論出於何種原因，下拉式不在小提琴中工作，但這對於我的問題並不重要。

編輯2：綠色是填充元素的填充。 a元素的文本位於藍色框的頂部，我希望它與藍色框垂直居中。

來源

2016-06-13 Eric M

把UR中的jsfiddle代碼，以便任何人都可以在它的工作 – SESN

嘿埃裏克，你的問題是還不清楚:( 怎麼樣小提琴或一支筆;） – b0y

我加了一個小提琴。我應該提及，當我說框時，我意思是css框模型（填充內部的部分）的內部大部分（如果有幫助的話）。 –

您是否嘗試在標籤中添加更多高度？喜歡這個？

.navbar-brand { 
float: left; 
height: 62px; 
padding: 21px 17px; 
font-size: 18px; 
line-height: 20px; 
}

https://jsfiddle.net/z4c1atdz/11/這樣子。

來源

2016-06-13 06:16:22

是的，在小提琴中，最後一條css規則將高度設置爲64px。填充將a標籤li的內容框放在中間，但a標籤的內容不位於包含a標籤內容的框中。我不知道box是否是我所描述的正確詞彙。我試圖描述填充內部最內部的css box模型。 –

你可以上傳你想要實現的圖像嗎？ –

您需要嚮導航欄中的元素添加填充以匹配新的高度，而不是僅更改它們的高度。

如果使用預處理器更改導航欄高度的高度變量。填充將自動計算。

如果您使用的是純CSS，則需要手動向元素添加額外的填充以匹配新的高度。基本上：

(navbar height - element height)/2

作爲一個例子可以看到從自舉的源（_nav-垂直align.scss混入）萃取SASS混入。

// Navbar vertical align 
// 
// Vertically center elements in the navbar. 
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 

@mixin navbar-vertical-align($element-height) { 
    margin-top: (($navbar-height - $element-height)/2); 
    margin-bottom: (($navbar-height - $element-height)/2); 
}

這是用於導航欄按鈕等...

來源

2016-06-13 07:28:30 Diego

該元素已經具有導航欄的高度，並且填充將元素在導航欄中垂直居中，這不是問題。問題是，如果你看圖片，文字不是垂直居中與藍色框。該藍色框包含a元素的內容，並且圍繞它的綠色是a元素的填充。 –

是的，那是因爲你正在設置元素的高度，你應該保留元素的默認高度並更改它們的填充。如果文本在具有設置高度的元素內，它將位於頂部，除非您使用彈性框......如果您注意到引導程序使用填充或邊距將navbar中的元素居中 – Diego

boostrap導航欄中的文本

回答

相關問題