我尝试将 block 网格置于 div 的中心,但是当我应用我的 CSS 类时, block 网格不受影响。
我在视觉上看到了这个(大纲是用 Firefox 扩展制作的): Block grid alligment
我想让它看起来像这样: Block grid alligment
如您所见,我还需要对齐 block 网格内容和 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);
}
最佳答案
如果您要居中对齐的 div 是另一个 div 的子元素。这是您可以执行的操作。
.parent-div {
text-align: center;
.child-div {
display: inline-block;
}
您也可以尝试不引用父 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;
}
关于html - 如何将 div 内的 Grid-block 水平居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41864388/