div内でulを水平に整列する方法

Question

このテキスト整列の中心が効果を発揮しない理由はわかりません。他のチュートリアルを参照して、textalign: centerをdivに、次にdisplay: inlineをulに適用します。

実際にWordPressテーマを構築するImとして要素を調べるとき、ブラウザからの私のHTMLコードのコピーです。

#footer-nav.collapse.navbar-collapse { 
 
    text-align: center; 
 
    font-size: 16px; 
 
    color: #383434; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px 
 
} 
 
div#footer-nav ul#menu-footer { 
 
    display: inline-block; 
 
} 
 
ul#menu-footer li { 
 
    padding: 0px 15px 0px 15px; 
 
}

<div id="footer-nav" class="collapse navbar-collapse"> 
 
    <ul id="menu-footer" class="nav navbar-nav"> 
 
    <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a title="About" href="http://localhost/eat-sleep-kayak-wp/about/">About</a> 
 
    </li> 
 
    <li id="menu-item-366" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-305 current_page_item current_page_parent menu-item-366 active"><a title="Blog" href="http://localhost/eat-sleep-kayak-wp/blog/">Blog</a> 
 
    </li> 
 
    <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a title="Newsletter" href="http://localhost/eat-sleep-kayak-wp/newsletter/">Newsletter</a> 
 
    </li> 
 
    <li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-365"><a title="Advertise" href="http://localhost/eat-sleep-kayak-wp/advertise/">Advertise</a> 
 
    </li> 
 
    <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a title="Contact" href="http://localhost/eat-sleep-kayak-wp/contact/">Contact</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

あなたはそれを構築するためにブートストラップを使用しているように思えます。ブートストラップのデフォルトのCSSがnavbarをfloatに設定している場合、inline-blockプロパティは中心を達成するために全く効果がありません。

.navbar-nav { 
    float: left; 
    margin: 0px; 
} 

あなたはあなたの実際のコードに追加することができ、この：私はCSSのFlexを使用しています

div#footer-nav ul#menu-footer { 
    display: inline-block; 
    float:none; 
} 

BootplyDemo

Answer 2

この

は、デフォルトのCSSです。あなたはチェックアウトすることができます codepen link.

#footer-nav.collapse.navbar-collapse { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    justify-content: center; // This centers the ul 
    font-size: 16px; 
    color: #383434; 
    margin-top: 30px; 
    margin-bottom: 30px; 
} 

div#footer-nav > ul#menu-footer { 
    display: inline-block; 
} 

ul#menu-footer li { 
    padding: 0px 15px 0px 15px; 
}