在Bootstrap列表中垂直居中文本

所以我創建了這個網站，它有一個頂部導航菜單，一個左側導航菜單和一個主要內容容器，全部由引導程序製成。問題是，我無法使頂部導航菜單中的文本和左側導航菜單垂直居中。我認爲兩者有同樣的問題，所以我將只顯示左側菜單中的代碼：在Bootstrap列表中垂直居中文本

HTML：

<div class="row"> 
    <div class="col-md-3 z-overview-left-menu"> 
     <ul class="z-left-list"> 
      <li class="z-left-list-item"><span class="z-test">One</span></li> 
      <li class="z-left-list-item z-selected">Two</li> 
      <li class="z-left-list-item">Three</li> 
     </ul> 
    </div> 
    <div class="col-md-9 z-overview-main-menu"> 

    </div> 
</div>

CSS：

.z-selected { 
    background-color: rgb(255, 216, 0); 
} 

.z-left-list { 
    vertical-align: middle; 
    padding-left: 0; 
    list-style: none; 
} 

.z-left-list-item { 
    display: block; 
    vertical-align: middle; 
    height: 7%; 
    font-size: 150%; 
    border-bottom: 1px solid black; 
}

簡化的jsfiddle：Jsfiddle

那麼我做錯了什麼？我已經嘗試將zl-left-list添加display: table，將z-left-list-item類添加display: table-cell。

來源

2015-11-04 zeno dhaene

請提供jsfiddle – Alex

@alirezasafian jsfiddle提供。 –

如果這是一個導航菜單，使用Bootstrap，爲什麼你不使用導航欄類？ – AgapwIesu

嘗試是這樣的：

<div class="z-overview-left-menu"> 
    <ul class="z-left-list"> 
     <li class="z-left-list-item"><span class="z-test">One asdfasd fasd fasdf asdf asdf</span></li> 
     <li class="z-left-list-item z-selected"><span>Two</span></li> 
     <li class="z-left-list-item"><span>Three</span></li> 
    </ul> 
</div>

.z-left-list { 
    padding-left: 0; 
    list-style: none; 
} 

.z-left-list-item { 
    width:100%; 
    display: table; 
    vertical-align: middle; 
    height: 60px; 
    font-size: 150%; 
    border-bottom: 1px solid black; 
} 
.z-left-list-item span { 
    display:table-cell; 
    vertical-align:middle; 
}

https://jsfiddle.net/fekfrwoz/7/

來源

2015-11-04 14:46:17 jorgeromero

正如我的問題所述，我已經嘗試過該選項 –

對不起，您正在左側菜單上工作，我錯過了它。立即檢查 https：// jsfiddle。net/fekfrwoz/7/ – jorgeromero

工程就像一個魅力！謝了哥們！ –

如果您知道您的列表項只有一行文字，您可以隨時將line-height添加到.z-left-list-item類定義中。

https://jsfiddle.net/fekfrwoz/1/

來源

2015-11-04 14:43:04 Quantastical

與此問題是，我的身高是百分比，然後這是行不通的。 –

啊，gotcha。我沒有注意到你的問題。我將在這裏留給未來的訪問者，但其他答案也應該提供一些替代方案。 – Quantastical

我覺得最好的方式爲垂直居中公正的東西：

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2015-11-04 14:45:41 Jay

您可以刪除.Z-左列表項的高度，並在頂部和李的底部使用填充，比如：

padding: 35px 0;

這將效仿他們的中心是李？

來源

2015-11-04 14:47:25 sshhDaniella

我希望它能夠快速響應，所以當屏幕高度發生變化時，硬編碼的值將不再正確 –

我強烈建議您使用導航欄類。請參閱here。這會讓你的代碼更容易維護，並且會利用Bootstrap所做的許多jscript編碼來使這些navbars正常工作。例如，在移動屏幕上，導航欄會摺疊成漢堡包圖標（三個疊加的橫條，可以爲您提供下拉菜單）。在我最新的網絡應用程序中，我有兩個導航欄（儘管位置與您所描述的不同），並且效果很好。

來源

2015-11-04 14:55:45 AgapwIesu

我會對此進一步瞭解 –

另外，如果您使用的是Bootstrap，我猜測您正在嘗試移動設備（現在非常需要Web應用程序）。爲此，我建議不要在左側有菜單。您可以將導航欄固定在頂部並帶有額外的下拉菜單，或者固定的導航欄和一個滾動頁面的頁面，或者兩個固定的導航欄疊加在一起（CNN.com）。但是您不想在菜單上吃掉寶貴的橫屏真實狀態，並強制用戶在手機上橫向和縱向滾動。 – AgapwIesu

在Bootstrap列表中垂直居中文本

回答

相關問題