Создание горизонтального меню в центр div

Question

Я попытался сделать горизонтальное меню, и это получится. Но как добраться до центра div, как я пытался поставить text-align:center, vertical-align:middle и display:inline. Они не работают на всех ..

Прежде всего, мой HTML будет, как это ниже

.nav { 
 
    border:1px solid #CCC; 
 
    border-width:1px 0; 
 
    list-style:none; 
 
    margin:0 auto; 
 
    padding:20px 0; 
 
    width:100%; 
 
    text-align: center; 
 
} 
 
    
 
ul.nav-menu { 
 
    list-style: none; 
 
    padding: 0; 
 
    font-size: 14px; 
 
    line-height: 14px; 
 
    font-family: 'latoregular'; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    text-align:center; 
 
} 
 

 
ul.nav-menu:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
    overflow: hidden; 
 
    visibility: hidden; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
ul.nav-menu li { 
 
    float: left; 
 
    margin: 0 0 0 10px; 
 
    position: relative; 
 
} 
 

 
ul.nav-menu li:first-child { 
 
    margin: 0; 
 
}

<div class="nav"> 
 
    <ul class="nav-menu"> 
 
     <li> <a href="#" class="selected"> HOME </a> </li> 
 
     <li> <a href="#"> PORTFOLIO </a> </li> 
 
     <li> <a href="#"> BLOG </a> </li> 
 
     <li> <a href="#"> CONTACT </a> </li> 
 
    </ul> 
 
</div>

И, наконец, вот JSFIDDLE.

Как нажимать .nav-menu в центр .nav? Есть идеи?

Answer 1

Снимите width и добавьте display: inline-block к вашему ul.nav-menu:

ul.nav-menu { 
    list-style: none; 
    padding: 0; 
    font-size: 14px; 
    line-height: 14px; 
    font-family: 'latoregular'; 
    margin: 0 auto; 
    display: inline-block; // add display: inline-block; 
    text-align:center; 
} 

Вы уже сделали все остальное (установка text-align: center на родительский контейнер).

Fiddle

Answer 2

добавить значение ширине навигационного меню

ul.nav-menu { 
     list-style: none; 
     padding: 0; 
     font-size: 14px; 
     line-height: 14px; 
     font-family: 'latoregular'; 
     margin: 0 auto; 
     width: 300px; 
     text-align:center; 
    } 


http://jsfiddle.net/dzxhv0Lh/1/ 

Answer 3

Снимите width: 100% и добавьте display: inline-block; от и до .nav-menu.

Таким образом, ширина элемента будет определяться дочерними элементами, а margin: 0 auto; будет вызывать меню до середины его родительского элемента.