Question

我想在图像上显示一个箭头。此箭头每次都应居中。我该怎么办？

以下是jsfiddle中的代码：

CSS：

.t1_img {
  background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
  position: relative;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  border-radius: 10px 0 0 0;
  height: 200px;
}
.t1_arrow {
  position: absolute;
  bottom: 0;
  width: 60px;
  border-left: 40px solid #cfcfcf;
  border-right: 40px solid #cfcfcf;
  border-top: 20px solid transparent;
}
.t1_content {
  background-color: #cfcfcf;
  height: 150px;
  padding-top: 20px;
  margin-bottom: 40px;
}

HTML：

<div class="container">
<div class="row">
<div class="col-md-3">
  <div class="t1_img">
  <div class="t1_arrow"></div>
  </div>
  <div class="t1_content">
    Textinhalt
  </div>
</div>
<div class="col-md-3">
  <div class="t1_img">
  <div class="t1_arrow"></div>
  </div>
  <div class="t1_content">
    Textinhalt
  </div>
</div>
<div class="col-md-3">
  <div class="t1_img">
  <div class="t1_arrow"></div>
  </div>
  <div class="t1_content">
    Textinhalt
  </div>
</div>
<div class="col-md-3">
  <div class="t1_img">
  <div class="t1_arrow"></div>
  </div>
  <div class="t1_content">
    Textinhalt
  </div>
</div>
</div>
</div>

Answer 1

你知道箭头的宽度，如果你把它放下：50％;和margin-left：-30px;因为它的宽度是60px，所以每次都会居中。所以添加这个

 .t1_arrow {left:50%;margin-left:-30px;}

Your fiddle edited

Answer 2

您可以使用以下行：

  left: calc((100% - 60px)/2);

其中60 px表示箭头的宽度。遗憾的是，并非所有浏览器都支持此方法。为安全起见，请将以下三行添加到.t1_arrow类中：

.t1-arrow {
    left: 45%;
    left: calc((100%-60px)/2);
    left: -webkit-calc((100%-60px)/2);
}

或者您可以使用jquery在pageload之后设置高度：

$(function() {
    $(".t1-arrow").each( function() {
        var w = $(this).parent(0).width();
        $(this).css('left',(w-60)/2 + 'px');
    });
});

Answer 3

如果您只希望它水平居中，请将以下内容添加到Arrow的CSS中;

  left: 0; right: 0;
  margin: auto;

更新了小提琴。 https://jsfiddle.net/86e0gg99/12/

Answer 4

在这里，您可以看到解决方案的图片，我正在寻找。 https://db.tt/1UFk3baW

中心箭头在img与css

4 个答案: