Как централизовать навигационную панель

Question

Как я могу централизовать панель навигации? Я пробовал несколько вещей, например <center>, но, я не знаю, что я делаю неправильно!

CSS:

.NavBar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

.NavItem { 
    float: left; 
} 

a:link, a:visited { 
    display: block; 
    width: 120px; 
    font-weight: bold; 
    color: #FFFFFF; 
    background-color: #080808; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
text 
} 

a:hover, a:active { 
    background-color: #7A991A; 
} 

HTML:

<ul class="NavBar"> 
    <li class="NavItem"><a href="#home">Home</a></li> 
    <li class="NavItem"><a href="#news">Snippets of Divinity</a></li> 
    <li class="NavItem"><a href="#contact">Contact</a></li> 
    <li class="NavItem"><a href="#about">Donate</a></li> 
</ul> 

Оправдание название кнопки навигации, я делаю сайт, посвященный мне и прекрасных вещей, которые я говорю и делаю.

Вот JSFiddle: https://jsfiddle.net/ryfv3499/

Answer 1

использования display: inline-block для .NavItem

для .NavBar - text-align: center

.NavBar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0; 
 
    text-align: center; 
 
} 
 

 
.NavItem { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 15px; 
 
} 
 

 
a:link, a:visited { 
 
    display: block; 
 
    width: 120px; 
 
    font-weight: bold; 
 
    color: #FFFFFF; 
 
    background-color: #080808; 
 
    text-align: center; 
 
    padding: 4px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
text 
 
} 
 

 
a:hover, a:active { 
 
    background-color: #7A991A; 
 
} 
 

 
body { background-color: #D0D0D0; }

<ul class="NavBar"> 
 
    <li class="NavItem"><a href="#home">Home</a></li> 
 
    <li class="NavItem"><a href="#news">Snippets of Divinity</a></li> 
 
    <li class="NavItem"><a href="#contact">Contact</a></li> 
 
    <li class="NavItem"><a href="#about">Donate</a></li> 
 
</ul>

Answer 2

Вы можете использовать следующее дополнение к вашему CSS:

.NavBar { 
    list-style-type: none; 
    /* margin: 0; */ 
    margin-left:auto; 
    margin-right:auto; 
    padding: 0; 
    overflow: hidden; 
} 

Это центрирования окна при условии, что имеет фиксированную ширину; вам может потребоваться явно указать ширину для вашей панели навигации тоже.

Надеется, что это помогает

Answer 3

Вы должны добавить margin: 0 auto; и определить width вашего элемента.

.NavBar { 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
    width:500px; 
} 

Вот скрипка: https://jsfiddle.net/ryfv3499/11/

Answer 4

Обновление правило .NavBar CSS

.NavBar { 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
    width:90%; 
} 

Вы можете использовать любую ширину, но 100%