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