どのように画像をliの中に整列させるには？

Question

申し訳ありませんが私の愚かな質問のために私はウェブ開発者に新しいです。

私は880pxのラッパーを持っており、その中に以下のコードがあります。私はすべてのli要素を均等に水平方向に880px以内に広げようとしています。私は右に完全に揃えられている最後の李として、それらを広げるためにマージン右を使用することを避けようとします。これを達成するための最良のCSSトリックは何でしょうか。事前にトンをありがとう！

<div id="services"> 
     <ul> 
      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title1</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li> 
      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title2</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li> 
      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title3</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li> 
      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title4</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li> 
      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title5</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li> 
      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title6</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li> 
     </ul> 
    </div> 

Answer 1

liにを追加し、中心にはtext-align: center;を追加します。 各li要素に幅を加えて広げます。 font-size:0をラッパーに追加して、HTML内のスペースがスペースを占有しないようにします。レイアウトに http://codepen.io/shippin/pen/KWQgoJ

Answer 2

<li>要素にwidthを指定してtext-align:centerを適用します。画像要素<img>はinline elementsですので、margin:auto;を中央揃えに使用する必要はありません。あなたが使用すること

<li class="slide" style="position: absolute; display: none; width: 880px; text-align:center;"> 

Answer 3

、

#services ul{ 
    display: flex; 
} 
#services ul li { 
    flex-direction: column; 
    justify-content: center; 
    flex-grow: 1; 
} 

これは、あなたが試してみてください役立ちます。デフォルトで

Answer 4

li要素が幅全体に広がるしていないので、あなたはそれらに100％の幅を適用する必要があり、その後、text-align: center;を使用してその内容をセンター：

li { 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div id="services"> 
 
    <ul> 
 
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" /> 
 
     <p class="ser-tag">Title1</p> 
 
     <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p> 
 
    </li> 
 
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" /> 
 
     <p class="ser-tag">Title2</p> 
 
     <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p> 
 
    </li> 
 
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" /> 
 
     <p class="ser-tag">Title3</p> 
 
     <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p> 
 
    </li> 
 
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" /> 
 
     <p class="ser-tag">Title4</p> 
 
     <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p> 
 
    </li> 
 
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" /> 
 
     <p class="ser-tag">Title5</p> 
 
     <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p> 
 
    </li> 
 
    <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" /> 
 
     <p class="ser-tag">Title6</p> 
 
     <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p> 
 
    </li> 
 
    </ul> 
 
</div>