javascript - 为什么 collection-item 在 collapsible 中不是垂直居中对齐的?

标签 javascript html css materialize

我正在使用 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>

问题出在集合项的垂直对齐上。我没有把它放在中心。它卡在顶部。 Vertical Alignment Problem .

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

最佳答案

在您的 head 标签中尝试以下样式代码

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

希望这会有所帮助!

关于javascript - 为什么 collection-item 在 collapsible 中不是垂直居中对齐的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39785979/

相关文章:

javascript - 通过 JavaScript 复制没有标题的 HTML 表格?

javascript - 如何将 'map' 与数组中的数组一起使用 (Json)

javascript - 返回 false 不会阻止表单提交

javascript - 如何搜索外部 URL 的 HTML 源并将结果返回到我的应用程序?

php - 如何将数组输入存储到数据库中? MYSQL PHP 表单输入foreach

javascript - fancybox.showloading 显示时如何部分覆盖页面?

html - 填充剩余的垂直空间 - 仅 CSS

javascript - 如何在 native react 中添加动态输入?

css - 在 CSS 中选择现有 div 的一部分

html - 如何使用css创建带有数字点的垂直线?