括弧内の行内のdivのセンタリングに問題があります

Question

私は4列を1列の中に集中させようとしています。私が望むようにコードペンや類似の作品を試してみましたが、Adobeの角かっこではうまくいきませんでしたが、バグや何かがあるかどうかわかりません... 誰にも分かりませんか？

PD：私の角括弧の出力には、すべてが左側にあります。

body { 
 
    position: relative; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container-fluid { 
 
    width: inherit; 
 
    height: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    padding: 100px 0; 
 
} 
 
.content-2 { 
 
    color: violet; 
 
    background-color: blueviolet; 
 
} 
 
div.img { 
 
    margin: 5px; 
 
    float: center; 
 
    width: 180px; 
 
} 
 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
.row-centered { 
 
    text-align: center; 
 
} 
 
.col-centered { 
 
    display: inline-block; 
 
    float: none; 
 
    margin-right: 0 auto; 
 
    width: 90%; 
 
}

<section class="content content-2"> 
 
    <div class="container"> 
 
    <div class="row row-centered"> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="forest.jpg" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>CREATIVIDAD</h3> 
 
      <p>hhhhhhhhhhhhhhhh</p> 
 
     </div> 
 
     </div> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="forest.jpg" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>DISEÑO</h3> 
 
      <p>hhhhhhhhhhh</p> 
 
     </div> 
 
     </div> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="forest.jpg" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>MULTIMEDIA</h3> 
 
      <p>hhhhhhhhhhhhh</p> 
 

 
     </div> 
 
     </div> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="forest.jpg" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>WEB</h3> 
 
      <p>hhhhhhhhhhh</p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

使用CSSフレキシボックス。 .row-centeredなど.col-centeredにフレキシボックスのプロパティを適用します。

.row-centered { 
    display: flex; /* Flex Container */ 
    flex-wrap: wrap; /* Wrap the content to next line if required */ 
    justify-content: center; /* Horizontally content to center */ 
    align-items: center; 
} 

.col-centered { 
    display: flex; /* Flex Container */ 
    flex-direction: column; /* Flex Direction - Column */ 
    justify-content: center; /* Vertically Center Alignment */ 
    float: none; 
    margin-right: 0 auto; 
    width: 90%; 
} 

は（がフルスクリーンを使用）以下、このスニペットを見てください：

body { 
 
    position: relative; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container-fluid { 
 
    width: inherit; 
 
    height: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    padding: 100px 0; 
 
} 
 
.content-2 { 
 
    color: violet; 
 
    background-color: blueviolet; 
 
} 
 
div.img { 
 
    margin: 5px; 
 
    float: center; 
 
    width: 180px; 
 
} 
 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
.row-centered { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.col-centered { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    float: none; 
 
    margin-right: 0 auto; 
 
    width: 90%; 
 
}

<section class="content content-2"> 
 
    <div class="container"> 
 
    <div class="row row-centered"> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="http://placehold.it/30x30" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>CREATIVIDAD</h3> 
 
      <p>hhhhhhhhhhhhhhhh</p> 
 
     </div> 
 
     </div> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="http://placehold.it/30x30" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>DISEÑO</h3> 
 
      <p>hhhhhhhhhhh</p> 
 
     </div> 
 
     </div> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="http://placehold.it/30x30" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>MULTIMEDIA</h3> 
 
      <p>hhhhhhhhhhhhh</p> 
 

 
     </div> 
 
     </div> 
 
     <div class="img col-md-2 col-centered"> 
 
     <img src="http://placehold.it/30x30" alt="Forest"> 
 
     <div class="desc"> 
 
      <h3>WEB</h3> 
 
      <p>hhhhhhhhhhh</p> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

・ホープ、このことができます！