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
Post a Comment