Question

我正在使用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”在中心垂直对齐。

Answer 1

在头标记中尝试以下style code

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

希望这会有所帮助！

Answer 2

vertical-align仅在定义line-height时有效。因此，您应该将line-height:添加到.collection-item：

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

为什么集合项目在折叠中不是垂直居中对齐的？

2 个答案: