Как я могу центрировать горизонтально Grid-блок внутри div?

Question

Я пытаюсь сосредоточить сетку блока внутри div, но когда я применяю свой класс CSS, сетка блока не будет затронута.

Я это визуально (Схема выполнена с расширением 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. Вот что вы можете сделать.

.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; 
    }