Как выровнять текст в строке меню?

Question

Я пытался получить текст, чтобы выровнять центр, но я не могу заставить его работать. Также текст начинает ползти справа в его поле после каждого пункта меню. Я начал раздражаться и бросил кучу text-align: center; повсюду, но я просто не знаю, что еще делать здесь.

У меня есть панель, которая подчеркивает любое меню, на котором вы нависаете, и другую цветную полосу для активного элемента.

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 a { 
    /*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 a { 
    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 > a { 
    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 all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 

#cssmenu > ul > li.active:after { 
    content: ''; 
    display: block; 
    padding-top: 46px; 
    border-bottom: 10px solid #252425; /*-- Menu Bar Color --*/ 
    -webkit-transition: .2s all linear; 
    -moz-transition: .2s all linear; 
    -o-transition: .2s all linear; 
    transition: .2s all linear; 
} 

Answer 1

Это происходит из-за этого правила:

#cssmenu a { 
    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; 
} 

Необходимо удалить padding: 0 51px;, потому что это заставляет якорь быть слишком широким для контейнера.

Answer 2

/*-- 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 a { 
 
    /*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 a { 
 
    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 > a { 
 
    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 all linear; 
 
    -moz-transition: .2s all linear; 
 
    -o-transition: .2s all linear; 
 
    transition: .2s all linear; 
 
} 
 
#cssmenu > ul > li.active:after { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 46px; 
 
    border-bottom: 10px solid #252425; 
 
    /*-- Menu Bar Color --*/ 
 
    -webkit-transition: .2s all linear; 
 
    -moz-transition: .2s all linear; 
 
    -o-transition: .2s all linear; 
 
    transition: .2s all linear; 
 
}

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

Answer 3

Попробуйте это ... Взял ширины #css> уль> ли, добавил фиксированную ширину #cssmenu уль и наценка: 0px авто в #cssmenu Ли, #cssmenu span, #cssmenu a

/*--menu--*/ 
    #cssmenu li, 
    #cssmenu span, 
    #cssmenu a { 
    margin: 0px auto; 
     padding: 0; 
     position: relative; 
     text-transform: uppercase; 
     text-align:center; 
     list-style:none; 
    } 

    #cssmenu ul { 
     width: 960px; 
    }