Как центрировать мои элементы привязки в моей пользовательской панели навигации?

Я пытаюсь построить пользовательскую панель навигации. В настоящее время это выглядит так:

введите описание изображения здесь

Как сделать так, чтобы каждый из якорных элементов попал в центр каждой ячейки (как по вертикали, так и по горизонтали)? Кроме того, элемент бренда имеет больший шрифт, но я хочу решение, которое будет хорошо центрировать все элементы.

Короче говоря, я хочу, чтобы это выглядело примерно так:

введите описание изображения здесь

Границы на первой картинке предназначены для тестирования, очевидно. Я сделал вторую фотографию с редактированием фотошопа. Мой код для этой страницы выглядит так:

<!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.

Так как мне исправить мой navbar? Вот что я хочу:

  • Текст каждого элемента привязки должен быть центрирован по вертикали и горизонтали.
    • Я хочу
    • элемент, содержащий элемент, занимающий 100% высоты панели навигации.

Любая помощь приветствуется!

Источник

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>
Источник
Другие вопросы по тегам