CSS：この特定の要素をページ上で水平にどのように配置するのですか？

Question

トップにタブナビゲーション付きのページがあります（page here;タブは「制作」、「ストーリーと開発」など）。私は、タブの行がページ上で水平に配置されていることを確認したいと思います。どうすればそれを達成できますか？私が間違っていないならば、それは現在おなかが中心です。 W3 Schools page on CSS centeringの指示に従うことにより

は、私が設定することで、近くに来た：

display: block; 
margin: auto; 
width: 99%; 

しかし、私はそれが適切な/最善の解決策だかはわかりません。 width: 99%を設定する必要がないソリューションはありますか？

重要なのは、サイトがWordPressで構築されていることです。

ありがとうございました。

Answer 1

あなたはこの近づく可能性が二つの方法があります。

text-align: center方法

を

.ut-nav-tabs li { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.ut-nav-tabs li:last-child { 
    margin-right: 0px; 
} 

.ut-nav-tabs { 
    text-align: center; 
} 

をこれは、あなたがtext-align: centerを宣言する場合にのみ機能します親の要素は、ブロック要素でなければなりません。。入れ子の子要素は、floatの規則が宣言されていないインラインブロック要素（たとえば、display: inline-block）でなければなりません。floatは、この方法とほとんどの方法で水平方向の中央揃えを試みます。

display: flex方法

.ut-nav-tabs { 
    display: flex; 
    justify-content: space-around; 
} 

.ut-nav-tabs li { 
    float: none; 
    margin-right: 0px; 
} 

これは、これらの日CSSに関する任意のアライメント問題のブロックと「ホットフィックス」の「新しい子供」ですが、私はそれが "だと言ってハザードうCSSの "jQuery" とにかく、それは正当な理由で、flex-boxのルールでは、一般的な配置（水平および垂直）を指定できるようになり、ブラウザーは正確な配置のためにすべての計算を行うことができます。

ブラウザの互換性：それは心配になる場合は、生産コードで注意して使用する必要がありますのでヘッドアップは、しかし、flex-boxは、古いブラウザはあなたに予期しない結果を与える可能性があり、従来のブラウザの貧弱または非常に限定的なサポートを持っています。

Answer 2

私はこの方法が優れていると思う：

.ut-nav-tabs { 
    width: 100%; 
    text-align: center; 
} 
.ut-nav-tabs li { 
    width: 179px; 
    float: none; 
    display: inline-block; 
    zoom: 1; 
    vertical-align: middle; 
}