javascript - Set all menu items to be center of Bootstrap Menu Header -


recently have resized bootstrap's menu size. problem text position of menu items shows in top of menu bar.

i want show menu items center of menu header. menu items aligned in center position.

here code : http://jsfiddle.net/y8v0rd9g

css:

.navbar .navbar-nav {   display: inline-block;   float: none; }  .navbar .navbar-collapse {   text-align: center; }  .navbar {   position: relative;   min-height: 80px;   margin-bottom: 20px;   border: 1px solid transparent } 

if use browser's dev tools, you'd see links (ul.nav) vertically center-aligned, list ends before nav element does. that's because you're setting min-height: 80px on nav. i'd recommend adding padding well, not way @lkg did it. instead, remove min-height rule , add top , bottom padding .navbar. way items remain center-aligned nicely. updated fiddle , updated code:

.navbar {   position: relative;   margin-bottom: 20px;   padding: 12px 0;   border: 1px solid transparent } 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -