在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。

请提供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/

正如我的问题所述，我已经尝试过该选项 –

对不起，您正在左侧菜单上工作，我错过了它。立即检查 https：// jsfiddle。net/fekfrwoz/7/ – jorgeromero

工程就像一个魅力！谢了哥们！ –

答

如果您知道您的列表项只有一行文字，您可以随时将line-height添加到.z-left-list-item类定义中。

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

与此问题是，我的身高是百分比，然后这是行不通的。 –

啊，gotcha。我没有注意到你的问题。我将在这里留给未来的访问者，但其他答案也应该提供一些替代方案。 – Quantastical

答

我觉得最好的方式为垂直居中公正的东西：

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

答

您可以删除.Z-左列表项的高度，并在顶部和李的底部使用填充，比如：

padding: 35px 0;

这将效仿他们的中心是李？

我希望它能够快速响应，所以当屏幕高度发生变化时，硬编码的值将不再正确 –

答

我强烈建议您使用导航栏类。请参阅here。这会让你的代码更容易维护，并且会利用Bootstrap所做的许多jscript编码来使这些navbars正常工作。例如，在移动屏幕上，导航栏会折叠成汉堡包图标（三个叠加的横条，可以为您提供下拉菜单）。在我最新的网络应用程序中，我有两个导航栏（尽管位置与您所描述的不同），并且效果很好。

我会对此进一步了解 –

另外，如果您使用的是Bootstrap，我猜测您正在尝试移动设备（现在非常需要Web应用程序）。为此，我建议不要在左侧有菜单。您可以将导航栏固定在顶部并带有额外的下拉菜单，或者固定的导航栏和一个滚动页面的页面，或者两个固定的导航栏叠加在一起（CNN.com）。但是您不想在菜单上吃掉宝贵的横屏真实状态，并强制用户在手机上横向和纵向滚动。 – AgapwIesu

在Bootstrap列表中垂直居中文本

相关推荐