wordpressのメインメニューを 左寄せから 中央揃いにしたいのですが

Question

みなさまお忙しい所 恐れ入ります。

wordpressのメインメニューを 左寄せから 中央揃いにしたいのですが

検索しても 見つかりません。

ご親切な方がいらっしゃいましたら ご指導お願いできませんでしょうか？

ご親切にごしてきありがとうございます。

codeは下記であっていますでしょうか？

テーマは「LION BLOG」と言うテーマです。
リンクは　https://fit-jp.com/theme/theme_download/

になります。

また　記載の違いがあれば　教えてください。何から何まですみません。。

/*グローバルナビ(ヘッダーで使用)*/
/*globalNavi内はWPの標準マークアップに従う*/
.globalNavi{
position:relative;
float:left;
width:100%;
}
.globalNavi ul{list-style:none;}

.globalNavi__list {
background:#006400;
border-radius:5px 5px 0 0;
}
.globalNavi__list::after {
content: "";
display: block;
clear: both;
}
.globalNavi__list a{
display:block;
padding:0 20px;
height:54px;
line-height:54px;
}
.globalNavi__list a:hover{
background:rgba(255,255,255,0.15);
transition: .2s;
}
.globalNavi__list > li{
position:relative;
float:left;
color:#ffffff;
border-left: 1px solid rgba(255,255,255,0.15);
border-right: 1px solid rgba(0,0,0,0.15);
}
.globalNavi__list > li:first-child{border-left: none;}
.globalNavi__list > li:first-child a{border-radius:5px 0 0 0;}
.globalNavi__list > li:last-child::after {
content: "";
position: absolute;
top: 0;
right: -2px;
bottom: 0;
border-left: 1px solid rgba(255,255,255,0.15);
}
.globalNavi__list > li.page_item_has_children::before,
.globalNavi__list > li.menu-item-has-children::before{
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 5px;
height: 5px;
margin-top: -5px;
border-bottom: solid 1px #ffffff;
border-right: solid 1px #ffffff;
transform: rotate(45deg);
}
.globalNavi__list > li.page_item_has_children > a,
.globalNavi__list > li.menu-item-has-children > a{padding:0 30px 0 20px;}
.globalNavi__list > li .children,
.globalNavi__list > li .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index:9999;
text-shadow: none;
}
.globalNavi__list > li .children > li,
.globalNavi__list > li .sub-menu > li{
overflow: hidden;
width: auto;
min-width: 300px;
white-space: nowrap;
height: 0;
background-color:#323232; 
transition: 0.2s;
}
.globalNavi__list > li:hover .children li,
.globalNavi__list > li:hover .sub-menu li{
overflow: visible;
border-top: 1px solid rgba(0,0,0,0.15);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.15) inset;
height:54px;
line-height:54px;
transition: 0.2s;
}
.globalNavi__toggle{display: none;}
.globalNavi__switch{display: none;}

です。うちのサークルのホームページです。

宜しく御願い致します。

Comments

[kei344]

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。

Answer 1

下記デモページの「ホーム｜テーマ-無料ダウンロード｜記事ランキングTOP15｜お問い合わせ(バグの報告)｜よくある質問」の部分を言っているなら、下記記述を追加すれば多分中央に来ます。

.globalNavi__list {
    margin: 0 auto;
} /* ADD */

【AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION MEDIA[ライオン メディア] - デモサイト】
http://lionmedia.fit-jp.com/

---

追記：

こっちのテーマね。

.t-light .globalNavi {
    display: flex;
    justify-content: center;
} /* ADD */

【AMP対応・SEO最適化・レスポンシブ・高機能の無料WordPressテーマ│LION BLOG[ライオン ブログ] - デモサイト】
http://lionblog.fit-jp.com/

Comments

[Nakagawa6900]

お忙しい中ありがとうございます。追加してみましたがやはり中央揃えにはなりませんでした。

[Nakagawa6900]

//

[kei344]

デモページを見ていないようですね。こちらが勘違いをして「LION MEDIA」について回答していました。
追記しておきます。

[Nakagawa6900]

ありがとうございます！中央寄せにできました。本当にありがとうございます！

[kei344]

コメントを編集された理由は？