divのイメージを半分の位置に配置する方法

Question

赤い四角の位置にアイコンを配置したいと思います。しかし、私は位置を試みました：相対的な位置と絶対的な私はなぜそれが動作していないか理解していない。

<div class="col-xs-12 col-sm-4"> 
      <div class="wrap"> 
       <img class="blockico" src="<?php bloginfo('template_url'); ?>/img/icons/catering150.png"> 
       <h4>Catering</h4> 
       <a href="url">The Menu</a> 
       <br> 
       <a href="url">Today's Menu</a> 
       <br> 
       <a href="url">Gallery</a> 
       <br> 
       <a href="url">Festivities</a> 
       <br> 
      </div> 
     </div> 

    .wrap { 
position:relative; 
width: 100%; 
height: 100%; 
background-color: #e9e9e9;} 

    .blockico { 
position:absolute; 
top:-50%;} 

Answer 1

ない、これはあなたのために働いていない理由を確認してください。私はそれをフィドルに差し込みました。（あなたが望むと思うような振る舞いはしませんが）イメージを上手く動かしているようです。ここでは、少し異なるアプローチ（位置属性を使用せず、負のトップマージンを適用する）のフィドルがあります。

.wrap { 
    margin-top:50px; /* push the wrap down a bit. You might not need this */ 
    width: 100%; 
    height: 100%; 
    background-color: #e9e9e9;} 

.blockico { 
    background:#666; /* added just for demonstration purposes */ 
    margin-top:-50px; /* and push the image up a bit */ 
} 

Answer 2

あなたがアップし、アウト画像を引っ張って、負のマージンを使用することができます。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
.options ul, 
 
.options li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.options>div { 
 
    margin: 50px 0; 
 
    /* for demo */ 
 
} 
 

 
.options .wrap { 
 
    padding: 1rem; 
 
    text-align: center; 
 
    background-color: #e9e9e9; 
 
} 
 

 
.blockico { 
 
    margin-top: -50px; 
 
}

<div class="container-fluid"> 
 
    <div class="row options"> 
 
    
 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="wrap"> 
 
     <img class="blockico" src="http://placehold.it/100x100/fc0"> 
 
     <h4>Restaurant</h4> 
 
     <ul> 
 
      <li><a href="url">The Menu</a></li> 
 
      <li><a href="url">Today's Menu</a></li> 
 
      <li><a href="url">Gallery</a></li> 
 
      <li><a href="url">Festivities</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="wrap"> 
 
     <img class="blockico" src="http://placehold.it/100x100/fc0"> 
 
     <h4>City Club &amp; Garden</h4> 
 
     <ul> 
 
      <li><a href="url">The Menu</a></li> 
 
      <li><a href="url">Today's Menu</a></li> 
 
      <li><a href="url">Gallery</a></li> 
 
      <li><a href="url">Festivities</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-xs-12 col-sm-4"> 
 
     <div class="wrap"> 
 
     <img class="blockico" src="http://placehold.it/100x100/fc0"> 
 
     <h4>Catering</h4> 
 
     <ul> 
 
      <li><a href="url">The Menu</a></li> 
 
      <li><a href="url">Today's Menu</a></li> 
 
      <li><a href="url">Gallery</a></li> 
 
      <li><a href="url">Festivities</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 3

更新CSS blockico

.blockico { 
    position:absolute; 
    transform: translate(-50%,-50%); 
    left: 50%; 
}