要素の量に左右されない中央のリスト要素

Question

不明な量のリスト要素を中央に配置することを検討しています。

<ul> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
<li>item 4</li> 
<li>item 5</li> 
</ul> 

<ul> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
<li>item 4</li> 
</ul> 

とCSS：

ul { 
    width: 100%; 
} 

li { 
    list-style: none; 
    display: inline-block; 
} 

そしてJSFiddle：

https://jsfiddle.net/ea37r9mr/

Answer 1

あなたでtext-align:center;を追加します。ここ

は、基本的なHTMLです10

ul { 
 
    width: 100%; 
 
    text-align: center; 
 
    border: 2px solid #222222; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width:10%; 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 0.5em 1em; 
 
    border: 2px solid #222222; 
 
    margin: 5px 0; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    </ul> 
 

 
    <ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    </ul>

Answer 2

古典の​​方法は、しかし、私はより満足のソリューションを含めたいセマンティックの目的のために、ofcourseのtext-align: centerを使用することです。あなたが提供JSfiddleを使用し

Use flexbox to go for exact horizontalと垂直なスタイリング

ul { 
    width: 100%; 
    background-color: gray; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

li { 
    list-style: none; 
    display: inline-block; 
    padding: 1em; 
} 

Answer 3

、あなたがする必要があるすべてはあなたのul要素にtext-align: centerを追加することです。

ようなので：ここ

ul { 
    width: 100%; 
    background-color: gray; 
    text-align: center; 
} 

li { 
    list-style: none; 
    display: inline-block; 
    padding: 1em; 
} 

は、私はあなたが視覚的な変化を見ることができるように追加text-alignで編集しているあなたのJSfiddleです。

希望すると便利です。

Answer 4

私はこれは必要なコードを形成するために、ベースコードをHTML5に& CSS3を使用することを含む、以下のあなたのための答えを出してきました：

ul { 
 
    width: 580px; 
 
    margin: auto; 
 
    text-align: center; 
 
    padding: 4px; 
 
    border: 2px solid black; 
 
} 
 

 
li { 
 
    margin: auto; 
 
    text-align: center; 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 8px; 
 
    border: 2px solid black; 
 
    width: 80px; 
 
}

<ul> 
 
<li>ITEM 1</li> 
 
<li>ITEM 2</li> 
 
<li>ITEM 3</li> 
 
<li>ITEM 4</li> 
 
</ul> 
 

 
<br> 
 

 
<ul> 
 
<li>ITEM 1</li> 
 
<li>ITEM 2</li> 
 
<li>ITEM 3</li> 
 
<li>ITEM 4</li> 
 
<li>ITEM 5</li> 
 
</ul>