divの内側にグリッドブロックを水平に中央に置く方法はありますか？

Question

divの内側にブロックグリッドを配置しようとしていますが、CSSクラスを適用するとブロックグリッドには影響しません。

私は視覚的に、この（アウトラインがFirefoxの拡張機能で作られています）があります。 Block grid alligment

を、私はこのように見えるようにしたい： Block grid alligment

あなたが見ることができるように、私はTEブロックグリッドを揃える必要がありますコンテンツと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

centerを整列する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; 
    }