jquery - How to align text in menu bar? -
i've been trying text align center, can't work. text starts creep right inside box after every menu item. started annoyed , threw bunch of text-align: center; on place, don't know else here.
i have bar underlines whatever menu hovering on , different colored bar active item.
html:
<div class="menu"> <div id="cssmenu"> <ul> <li><a href="index.html"><span>home</span></a></li> <li><a href="about.html"><span>about</span></a></li> <li class="active"><a href="news.html"><span>news</span></a></li> <li><a href="gallery.html"><span>gallery</span></a></li> <li class="last"><a href="contact.html"><span>contact</span></a></li> </ul> </div> </div> css:
/*-- menu logo --*/ .logo { float: left; /*background: #de5491;*/ padding: 23px 20px; width: 406px; height: 80px; vertical-align: central; } .menu { float: right; width: 53%; } /*--menu--*/ #cssmenu li, #cssmenu span, #cssmenu { /*margin: 0;*/ padding: 0; position: relative; text-transform: uppercase; text-align: center; } #cssmenu { padding-top: 40px; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu { color: #000; display: inline-block; line-height: 49px; padding: 0 51px; text-decoration: none; font-weight: normal; font-size: 1.5em; font-family: 'bebas_neueregular'; text-align: center; } #cssmenu ul { /*list-style: none;*/ } #cssmenu > ul { /*float: left;*/ text-align: center; } #cssmenu > ul > li { float: left; /*display:block;*/ text-align: center; /*width: 24.9999%;*/ width: 19.9999%; } #cssmenu > ul > li > { color: #000; } #cssmenu > ul > li:hover:after { content: ''; display: block; padding-top: 46px; border-bottom: 10px solid #003; /*-- menu bar hover color --*/ -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; transition: .2s linear; } #cssmenu > ul > li.active:after { content: ''; display: block; padding-top: 46px; border-bottom: 10px solid #252425; /*-- menu bar color --*/ -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; transition: .2s linear; }
it's happening because of rule:
#cssmenu { color: #000; display: inline-block; line-height: 49px; text-decoration: none; font-weight: normal; font-size:1.5em; font-family: 'bebas_neueregular'; text-align:center; } need remove padding: 0 51px; because causes anchor wide it's container.
Comments
Post a Comment