html - 将侧边栏菜单的初始行居中

Question

我用过这个教程http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/在我的 _Layout 代码中创建一个侧边栏。我试图让侧边栏 li -> a -> "Test Sidebar"元素居中。请问我该如何响应地做到这一点。我可以给它设置一个边距值，但这不是很理想。

_Layout.cshtml代码

<div class="container">
    <ul id="gn-menu" class="gn-menu-main">
        <li class="gn-trigger">
            <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
            <nav class="gn-menu-wrapper">
                <div class="gn-scroller">
                    <ul class="gn-menu">
                        <li class="gn-search-item">
                            <input placeholder="Search" type="search" class="gn-search">
                            <a class="gn-icon gn-icon-search"><span>Search</span></a>
                        </li>
                        <li>
                            <a class="gn-icon gn-icon-download">Popular</a>
                        </li>
                        <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                        <li><a class="gn-icon gn-icon-help">About us</a></li>
                    </ul>
                </div><!-- /gn-scroller -->
            </nav>
        </li>
        <li><a href="http://tympanus.net/codrops">Test Sidebar</a></li>
        <li></li>
    </ul>

     @RenderBody()
</div><!-- /container -->
<script src="../../Scripts/classie.js"></script>
<script src="../../Scripts/gnmenu.js"></script>
<script>
    new gnMenu(document.getElementById('gn-menu'));
</script>

代码笔 http://codepen.io/anon/pen/LNjYJd

Answer 1

解决方案需要遵循一些步骤。

1 - 从 .gn-menu-main > li 中删除 float:left 并添加到 .gn-menu-main li.gn-trigger.

2 - 将 display:block 替换为 display:inline-block

3 - 添加 text-align:center 和 font-size:0(设置边距的字体大小)到 .gn-menu-main

4 - 根据你的设计给 font:size li 13px 到 .gn-menu-main > li

尝试按照以下步骤操作可能对您有帮助 fiddle