HTML、CSS：ディスプレイとのテキストの整列：インラインが動作しない

Question

私はウェブサイトを構築しようとしています。テキストの整列：centerはdisplay：inline-blockでは動作しませんが、display：inline-blockで動作するようにテキスト整列する方法はありますか？

body { 
 
    font-family: sans-serif, 'Helvetica'; 
 
    background-color: #f9f9f9; 
 
    text-align: center; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    min-width: 100px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
#my_cycle_head { 
 
    text-align: center; 
 
} 
 
#main_navbar { 
 
    text-align: center; 
 
} 
 
#main_navbar li { 
 
    list-style-type: none; 
 
    padding-right: 20px; 
 
    display: inline; 
 
} 
 
#main_navbar li a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    overflow: hidden; 
 
}

<header> 
 
    <h1 id="my_cycle_head">My Cycle</h1> 
 
    <ul id="main_navbar"> 
 
    <li> 
 
     <a href="#">Home</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a class="dropbtn">Dropdown</a> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <a href="faq.html">FAQ's</a> 
 
    </li> 
 
    <li> 
 
     <a href="about.html">About</a> 
 
    </li> 
 
    </ul> 
 
</header>

Answer 1

あなたがdisplay: inlineを使用し、要素は、コンテンツの幅にサイズ変更します。そこにはそれを集中させる簡単な方法はないからです。

ただし、display: inline-block;を使用すると、2つが組み合わされ、インライン（前後の折り返しなし）でも設定幅を持つことができます。

#main_navbar li { 
list-style-type: none; 
padding-right: 20px; 
display: inline-block; 
}