如何將圖像的一半放在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%; 
}