为什么collection-item在可折叠时不是垂直居中对齐？

我正在使用materializecss框架。 http://materializecss.com/为什么collection-item在可折叠时不是垂直居中对齐？

我想包含在sidenav里面的可折叠的内部链接集合。

<body> 

    <!-- Navbar goes here --> 

    <!-- Page Layout here --> 
    <div class="row"> 

     <div class="col s3"> 
     <!-- Grey navigation panel --> 
      <ul id="slide-out" class="side-nav fixed collapsible" data-collapsible="accordion"> 
       <li> 
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>String Operations</div> 
        <div class="collapsible-body collection"> 
         <!-- <div class="collection"> --> 
          <a href="#!" class="collection-item"> Alvin </a> 
          <a href="#!" class="collection-item"> Alvin </a> 
          <a href="#!" class="collection-item"> Alvin </a> 
          <a href="#!" class="collection-item"> Alvin </a> 
         <!-- </div> --> 
        </div> 
       </li> 
       <li> 
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div> 
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> 
       </li> 
       <li> 
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div> 
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> 
       </li> 
      </ul> 

      <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> 
     </div> 

     <div class="col s9"> 
     <!-- Teal page content --> 
      work area 
     </div> 

    </div> 

</body>

问题是与收集项目的垂直对齐。我没有得到它在中心。它挂在顶部。。

我想让那部分“Alvin”在中心垂直对齐。

来源

2016-09-30 Jaydeep Ranipa

尽量使标签显示块，然后垂直居中对齐或保证金自动0 –

尝试以下style code在你的脑袋标签

<head> 
    ... 
    <style> 
     .side-nav.fixed a{line-height: 50px;} 
    </style> 
    ... 
</head>

希望这将帮助！

来源

2016-09-30 07:43:15

vertical-align只有当line-height已被定义。所以，你应该添加line-height:到.collection-item：

.collection-item { 
    line-height: 2.5em; 
    vertical-align: middle; 
}

来源

2016-09-30 07:55:40

感谢您的帮助。我想使用MaterializeCSS框架的内置工具。你能帮我吗？http：//materializecss.com/collapsible.html http://materializecss.com/collections.html –

好的。我刚刚在jsfiddle上检查了你的代码。问题是'collection-item'的'padding'属性被'.side-nav.fixed a'的'padding'属性覆盖了。所以基本上，你需要在你的css文件中重写它。 '.collection a.collection-item {padding：10px 20px！important;}' –

为什么collection-item在可折叠时不是垂直居中对齐？

回答

相关问题