Web サイトのナビゲーション ボタンを中央に配置するのに苦労しています。さまざまなオプションを検索して試しましたが、成功するものは見つかりませんでした。私のコードは次のようになります。PS - 私のコードはエレガントなテーマ テンプレートからのものです。
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 3px solid #f7f7f7;
overflow: hidden;
}
#menu #main-menu {
float: none !important!;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav li {
float: left;
border-right: 1px dashed #dcdcdc;
width: auto;
margin-left: auto;
margin-right: auto;
}
#menu .nav a, ul#mobile_menu a {
font-size: 12px;
color: #c6c6c6;
text-decoration: none;
text-transform: uppercase;
display: block;
height: 44px;
overflow: hidden;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
#menu .nav a > span {
padding: 12px 14px 11px;
}
#menu .nav ul li a > span {
padding: 0;
}
#menu .nav ul li {
border: none;
}
#menu .nav ul a, ul#mobile_menu a {
padding: 14px 5px 14px 25px;
height: auto;
overflow: visible;
width: 195px;
}
#menu .nav ul a:hover, ul#mobile_menu a:hover {
background: #4b93ad;
text-decoration: none;
}
span.menu_slide {
color: #fff;
background: #549eb9;
}
ul#mobile_menu a {
display: block;
padding-left: 5px;
padding-right: 5px;
width: auto;
}
#menu .nav > li.current_page_item > a:hover {
background: none;
color: #c6c6c6;
}