CSS-центр навигация ссылок

Question

Не имея проблем с центрированием некоторых текстовых ссылок в моей навигационной панели, маржа слева и справа автоматически не работает, и я пробовал устанавливать типы отображения для блокировки/встроенного блока безрезультатно. Решение, вероятно, смотрит на меня в лицо, которое я знаю, но я действительно не могу его найти.

CSS:

.navmenu { 
    background-color: #1e1e1e; 
    background-image: url("../images/NavBar.gif"); 
    background-position: top; 
    border-top: 1px solid #383838; 
    margin-bottom: 5px; 
    z-index:105; 
} 
.navlink { 
    margin-left:auto; 
    margin-right: auto; 
    width: 100%; 
    font-size: 28px; 
    text-transform: uppercase; 
} 

HTML:

<div class="navmenu"> 
    <div class="navlink"> 
     <a href="index.php">Home</a> 
     <a href="http://twitch.tv/" target="_blank">Twitch</a> 
     <a href="http://youtube.com/" target="_blank">YouTube</a> 
     <a href="http://twitter.com/" target="_blank">Twitter</a> 
     <a href="http://facebook.com/" target="_blank">Facebook</a> 
     <a href="teamspeak.php">Teamspeak</a> 
     <a href="/forum/">Forum</a> 
    </div> 
</div> 

Answer 1

Добавить text-align:center; в свой nav-link класс

.nav-link 
{ 
text-align:center; 
} 

Answer 2

Try:

.navlink { text-align:center } 

Answer 3

Похоже, вы устанавливаете .navlinkwidth на номер 100%. Уменьшите его до ширины остальной части вашего контента. Я пробовал 800px, и он работал хорошо.

Answer 4

Верхний логотип центрирован, потому что он имеет фиксированную ширину. Навигационная панель не центрирована, поскольку она составляет 100% от ширины экрана. Если вы сделаете это более низким процентом или используете ту же фиксированную ширину, что и изображение логотипа, тогда он будет работать по центру.

.navlink { 
    margin-left:auto; 
    margin-right: auto; 
    width: 1024px; 
    font-size: 28px; 
    text-transform: uppercase; 
} 

Answer 5

.nav-menu{ width: 100%; text-align: center; } 

Это работает для меня.

Answer 6

у меня есть еще одно очень хорошее решение для вас

<div id="nav"> 
    <span><a href="#">Twitter</a></span> 
    <span><a href="#">Facebook</a></span> 
    <span><a href="#">YouTube</a></span> 
</div> 


<!--Css style sheet for above code--> 
#nav{ 
    width:100%; 
    text-align:center; 
} 
#nav span a{ 
    text-decoration:none; 
    padding:10px; 
}