画像が中央に揃えない

Question

4枚の画像を中央に配置する必要がありますが、できません。 私はすでにtext_alignを使って試しましたが、私が見つけたいくつかの例があります。

HTMLコード：

#categorias{ 
 
    width: 100%; 
 
} 
 
.category { 
 
    float: left; 
 
    height: 200px; 
 
    width: 250px; 
 
    border-style: solid; 
 
    border-color: #009bdb; 
 
    border-radius: 5px; 
 
    border-width: 4px; 
 
}

<div id="categorias"> 
 
     <img class="category" alt="informatica" src="imgs/19.png" /> 
 
     <img class="category direita" alt="papelaria" src="imgs/material-escolar.jpg" /> 
 
     <img class="category direita" alt="segurança" src="imgs/ssm-1.jpg" /> 
 
     <img class="category direita" alt="multimedia" src="imgs/HTS5590.jpg" /> 
 
    </div>

それが今では動作しませんなぜ私は理解していない、私はすでに、同じサイトの他の部分にこれをしなかったし、それが働きました。 上記のコードでは、中心になる定義はありません。

ありがとうございました

Answer 1

CSSフレックスは、このようなレイアウトに最適です。ここでフレキシボックスは、様々なレイアウトを作成するために実装することができ、すべての方法を記述した偉大なリソースです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#categorias{ 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    
 
    /* use this if you want items to wrap, remove if you want them in a row */ 
 
    flex-wrap:wrap; 
 
} 
 
.category { 
 
    height: 200px; 
 
    width: 250px; 
 
    border-style: solid; 
 
    border-color: #009bdb; 
 
    border-radius: 5px; 
 
    border-width: 4px; 
 
}

<div id="categorias"> 
 
     <img class="category" alt="informatica" src="http://via.placeholder.com/350x150" /> 
 
     <img class="category direita" alt="papelaria" src="http://via.placeholder.com/350x150" /> 
 
     <img class="category direita" alt="segurança" src="http://via.placeholder.com/350x150" /> 
 
     <img class="category direita" alt="multimedia" src="http://via.placeholder.com/350x150" /> 
 
    </div>