How to center vertically menu items on nav bar?

Question

I try to center vertically menu items "TEST 1","TEST 2" and "BRAND" without successful. I have tried vertical-align,margin-top and bottom.

I mean, I don't want to put one on top of another, just center between margin top and bottom of the nav bar.

I really appreciate if somebody can help me.

HTML

<nav class="navbar navbar-default">
      <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-
    toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a href="index.html" class="navbar-brand">BRAND</a>
   </div>
   <div class="collapse navbar-collapse" id="menu-collapse">
   <ul class="nav navbar-nav navbar-center">
    <li><a id="menu-right" href="#">TEST 1</a></li>
    <li><a id="menu-right" href="#">TEST 2</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><button class="btn btn-primary">Start Now</button></a></li>
    <li><a href="#"><button class="btn btn-primary">Member Login </button></a>
     </li>
     </ul> 
      </div>
     </div>
     </nav>

CSS

    #menu-right:hover {
        background: #5d5dc9;
        color:#fff;
    }

    #menu-right {
        color:#337ab7;
        text-transform: uppercase;
        vertical-align: middle;
    }

ul {
  vertical-align: middle;
}


    .button-margin {
        border: 1px solid;
    }

    .navbar-brand {
        margin-right: 200px;
    }


    .navbar {
        margin-bottom: 0;
        font-family: 'Raleway', sans-serif;
        font-size: 1.5em;
        font-weight: 800;
        text-transform: uppercase;
    }

Here is a link to codepen website test : https://codepen.io/fdcoder81/pen/Kymyyj

Thank you very much

Avoid asking duplicate questions. You can simply refer to this answer, https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Akansh, Nov 12 '17 at 20:39
Possible duplicate of [Vertical alignment of elements in a div](https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Reborn, Nov 12 '17 at 21:14

Luckyfella · Answer 1 · 2017-11-13T11:54:17.993

If you set the line-height of your a tags to the height of the navbar it should be aligned vertically centered.

Btw both of your:

<a id="menu-right" href="#">

occurences should have classes - you can't have the same id assigned more than one element.

Take

<a class="menu-right" href="#">

And change in your css accordingly to

.menu-right

EDIT: I played around with your codepen stuff - I don't know if that's the way to go when using bootstrap but it works.

Your HTML:

    <html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,800" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand">BRAND</a>
                </div>
                <div class="collapse navbar-collapse" id="menu-collapse">
                    <ul class="nav navbar-nav navbar-center">
                        <li>
                            <a class="menu-right" href="#">TEST 1</a>
                        </li>
                        <li>
                            <a class="menu-right" href="#">TEST 2</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">
                                <button class="btn btn-primary">Start Now</button>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <button class="btn btn-primary">Member Login </button>
                            </a>
                        </li>

                    </ul>
                </div>


            </div>



        </nav>

    </header>

    <!--<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>-->
</body>

</html>

Your CSS:

.menu-right:hover {
    background: #5d5dc9;
    color: white;
}

.menu-right {
    color:#337ab7;
    text-transform: uppercase;
    line-height: 54px;
}
.button-margin {
    border: 1px solid;
}

.navbar > .container-fluid .navbar-brand {
    margin-right: 200px;
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}


.navbar {
    margin-bottom: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    font-weight: 800;
    text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a {
    line-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
}

If I use class instead of id, it doesn't work.... also color and background doesn't change. — FDCODER81, Nov 12 '17 at 20:46

How to center vertically menu items on nav bar?

1 Answers1