Как я могу нажать кнопку центра меню для slicknav?

Question

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

образец наценка здесь

<ul id="menu"> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
    <li><a href="#">item 3</a></li> 
    <li><a href="#">item 4</a></li> 
</ul> 

и JS

$(function() { 
    $('#menu').slicknav(); 
}); 

здесь codepen ссылку http://codepen.io/anon/pen/oLWpao

Answer 1

Я нашел решение на мой вопрос.

просто добавил некоторые CSS

.slicknav_menu { 
    display: block; 
    text-align: center; 
    width: 100%; 
} 
.slicknav_btn { 
    display: inline-block; 
    float: none; 
    text-align: center; 
} 

Это решило мою проблему.

здесь codepen ссылка: http://codepen.io/anon/pen/OXmQLG

Answer 2

Проверьте ваш браузер инспектировать. Все элементы снабжены дисплеем: блок, который дает ему полную ширину. Если вы установите на дисплее «.slicknav_nav a»: встроенный блок и родительский литер текстового центра, все должно быть таким, каким вы хотите.

.slicknav_nav a { 
    display: inline-block; // instead of block; 
} 

.slicknav_nav li { 
    text-align: center; 
} 

Это может быть полезная информация: What is the difference between display: inline and display: inline-block?

Answer 3

.slicknav_menu { 
    text-align: center; 
} 

.slicknav_btn { 
    display: inline-block; 
    float: none; 
}