我正在使用 materializecss 框架。 http://materializecss.com/
我正在尝试将链接集合包含在 collapsible 中,它又在 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”部分在中心垂直对齐。
最佳答案
在您的 head 标签中尝试以下样式代码
<head>
...
<style>
.side-nav.fixed a{line-height: 50px;}
</style>
...
</head>
希望这会有所帮助!
关于javascript - 为什么 collection-item 在 collapsible 中不是垂直居中对齐的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39785979/