Question

我必须将4张图像对齐到中心，但我不能。我已经尝试过text_align和我找到的其他一些例子。

HTML代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我已经在同一网站的其他部分做了这个并且它有效，我不明白它为什么现在不起作用。在我上面留下的代码中，它不包含任何中心定义。

由于

Answer 1

CSS flex非常适合这样的布局。这是一个很好的资源，描述了创建各种布局可以实现的所有方式：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>

图像不会在中心对齐

1 个答案: