爲什麼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在可摺疊時不是垂直居中對齊？

回答

相關問題