Question

我正在尝试构建自定义导航栏。目前，它看起来像这样：

如何将每个锚元素放在每个框的中心（垂直和水平）？此外，品牌元素有一个更大的字体，但我想要一个能很好地集中所有元素的解决方案。

简而言之，我希望它看起来像这样：

第一张照片上的边框显然是为了进行测试。我用photoshop编辑制作了第二张照片。我对此页面的代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Basic Page Needs
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <meta charset="utf-8">
        <title>My Page</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Mobile Specific Metas
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- FONT
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <!-- CSS
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/skeleton.css">
        <!-- Favicon
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <link rel="icon" type="image/png" href="images/favicon.png">

        <style type="text/css">
            nav.navbar {
                height: 50px;
                margin: 0 0 25px 0;
                background: white;
                box-shadow: 0 2px 2px #d3d3d3;
            }
            ul.navbar-list {
                list-style: none;
                height: 50px;
            }
            ul.navbar-list-left {
                float: left;
            }
            ul.navbar-list-right {
                float: right;
            }
            ul.navbar-list > li.navbar-item {
                display: inline-block;
                height: inherit;
            }

            ul.navbar-list > li.navbar-item > a.navbar-link {
                display: block;
                width: 100%;
                height: 100%;
                color: black;
                text-decoration: none;

                margin-top: 13px;
                margin-right: 15px;

            }

            ul.navbar-list > li.navbar-item > a.navbar-brand-link {
                font-size: 20px;
                font-weight: bold;
                margin-top: 7px;
                margin-right: 25px;
            }


        </style>

    </head>
    <body>
        <!-- Primary Page Layout
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <nav class="navbar">
            <div class="container">
                <ul class="navbar-list navbar-list-left navbar-brand-list">
                    <li class="navbar-item navbar-brand-item">
                        <a href="#" class="navbar-link navbar-brand-link">BRAND</a>
                    </li>
                </ul>
                <ul class="navbar-list navbar-list-left">
                    <li class="navbar-item">
                        <a href="http://professorsreviewbd.com" class="navbar-link">Product</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#" class="navbar-link">Pricing</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#" class="navbar-link">Company</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#" class="navbar-link">Blog</a>
                    </li>
                </ul>
                <ul class="navbar-list navbar-list-right">
                    <li class="navbar-item">
                        <a href="#" class="navbar-link">Log in</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#" class="navbar-link">Sign up</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="container">
            <div class="row">
                <div class="twelve column">
                    <h4>Basic Page</h4>
                    <p>
                        Lorem ipsum ....
                    </p>
                </div>
            </div>
        </div>
        <!-- End Document
            –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    </body>
</html>

注意：我正在使用Skeleton。

那么如何修复我的导航栏？这些是我想要的东西：

每个锚元素的文本需要垂直和水平居中。
- 我希望包含该元素的
- 元素占据导航栏高度的100％。

感谢任何帮助！

Answer 1

替换此css并检查，它可能对您有所帮助..

<style type="text/css">
    nav.navbar {
        height: 50px;
        margin: 0 0 25px 0;
        background: white;
        box-shadow: 0 2px 2px #d3d3d3;
    }
    ul.navbar-list {
        list-style: none;
        height: 50px;
    }
    ul.navbar-list-left {
        float: left;
    }
    ul.navbar-list-right {
        float: right;
    }
    ul.navbar-list > li.navbar-item {
        display: inline-block;
        height: inherit;
    }

    ul.navbar-list > li.navbar-item > a.navbar-link {
        display: block;
        width: 100%;
        height: 100%;
        color: black;
        text-decoration: none;

        margin-right: 15px;

    }

    ul.navbar-list > li.navbar-item > a.navbar-brand-link {
        font-size: 18px;
        font-weight: bold;
        margin-right: 25px;
    }


</style>

如何将我的锚元素置于自定义导航栏中？

1 个答案: