如何将图像的一半定位在 div 响应之外

Question

我想将图标放在红色方块所在的位置。但是我已经尝试了 position: relative 和 position absolute 但我不明白为什么它不起作用。

   <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

不确定为什么这对您不起作用；我将它插入 Fiddle 并且（虽然它的行为与我想的不一样）它似乎可以很好地向上移动图像。这是一个 fiddle 稍微不同的方法（不使用位置属性；只是应用负的上边距）可能会让你更接近。

https://jsfiddle.net/35aohm3y/

.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

更新cssblockico

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

如何将图像的一半定位在 div 响应之外

How to position half of image out of the div responsive

css

positioning

image

responsive