如何将 div 内的网格块水平居中？

Question

我正在尝试将 div 内的 Block 网格居中，但是当我应用 CSS class 时，Block 网格不受影响。

我看到了这个（轮廓是用 Firefox 扩展制作的）： Block grid alligment

我想让它看起来像这样： Block grid alligment

如您所见，我需要对齐块网格内容和 div 内容，但我不知道该怎么做。

这是我当前的代码：

<div class="sitios-amigos">


<div class="wrap row small-up-1 medium-up-4">

    <div class="column column-block tarjeta-material">
        <a src="http://www.conacyt.gob.mx/" target="_blank"><img alt="Página web Conacyt" src="img/conacyt.png"/></a>
    </div>
    <div class="column column-block tarjeta-material">
        <a href="http://www.concytep.pue.gob.mx/" target="_blank">
        <img alt="Página web de Concytep" src="img/concytep.png"></a>
    </div>
    <div class="column column-block tarjeta-material">
    <a href="http://www.viep.buap.mx/" target="_blank">
        <img alt="Página web VIEP BUAP" src="img/VIEP.png"></a>
    </div>           
</div>

</div>

CSS:

.sitios-amigos{

background: red;
max-width:11000px;
width: 100%;
margin: 0 auto; 
}
.wrap{
width:90%;
max-width:11000px;
margin: 0 auto;
}
.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}

.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}




.tarjeta-material {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin: 15px 10px;
text-align:center;
}

.tarjeta-material:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

Answer 1

您尝试过使用 bootstrap grid system 吗？他们有这么多样本，而且更容易使用..

Answer 2

如果您要居中的 div 是另一个 div 的 child。这是您可以执行的操作。

.parent-div {
    text-align: center;

.child-div {
    display: inline-block;
}

您也可以尝试不引用 parent div。

.child-div {
    margin-left: auto;
    margin-right: auto;
}

将它置于绝对中间尝试：

.parent-div {
        position: relative;

    .child-div {
        position: absolute;
        top: 50%;
        /* this will put the left edge at 50%. not the image */
        left: 50%;
        /* do a negative margin-left of half the width of your block so you have to find that.*/
        margin-left: -halfthewidth;
        margin-top: -halfthelength;
    }

如何将 div 内的网格块水平居中？

How can I center horizontally a Grid-block inside of a div?

html

css

zurb-foundation