如何将图像附加到div的底部中间？

Question

我正在努力实现以下目标：

我基本上有。唯一缺失的部分是向下箭头的Svg。我需要它在div（绿色部分）的中间，不管div有多宽。我已经尝试将.listing-price:after.left设置为50％，但我认为它没有做到它应该做的事情。我也希望箭头附加到主div的底部，但我通过硬连线.listing-price:after.top属性来获得它。

1. 如何让箭头位于中间？
2. 是否有更好的方法将箭头附加到div的底部而不是硬连接.top属性？

这是我到目前为止所做的：

body {
  background-color: salmon;
  transform: scale(3.0);
  transform-origin: 0 0;
}
.listing-price {
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  text-align: center;
  user-select: none;
  background-color: #009934;
  border-color: #F2F5F3;  
}

/* Favorite Marker */
.listing-price:before {
  content: url(https://rgelb.github.io/public/misc/heart_icon.svg);
  display: inline-block;
  position: absolute;
  right: -7.8px;
  top: -6px;
}

/* Downward arrow */
.listing-price:after {
  content: url(https://rgelb.github.io/public/misc/arrow_border.svg);
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 10px;
}

.listing-price-open-new-house {
  background-color: #586371;
  border-color: white;
  border-radius: 2px;
  border-spacing: 1px;
  border-style: solid;
  border-width: 1px;
  color: white;
  display: block;
  font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  left: -1px;
  line-height: 10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -11px;
  width: 30px;
}

  <div style="height: 25px;margin-top: 40px;">
    <div class="listing-price">
      <i class="listing-price-open-new-house">Open</i>
      $258K
    </div>    
    <div class="listing-price">
      <i class="listing-price-open-new-house">Open</i>
      $9M
    </div>        
  </div>

Answer 1

您很幸运，只需为箭头设置left:0;width:100%;即可：

＆＃13;

＆＃13;

body {
  background-color: salmon;
  transform: scale(3.0);
  transform-origin: 0 0;
}
.listing-price {
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  text-align: center;
  user-select: none;
  background-color: #009934;
  border-color: #F2F5F3;  
}

/* Favorite Marker */
.listing-price:before {
  content: url(https://rgelb.github.io/public/misc/heart_icon.svg);
  display: inline-block;
  position: absolute;
  right: -7.8px;
  top: -6px;
}

/* Downward arrow */
.listing-price:after {
  content: url(https://rgelb.github.io/public/misc/arrow_border.svg);
  display: inline-block;
  position: absolute;
  top: 8.9px; /* a bit of fine-tuning */
  left: 0;
  width: 100%;
}

.listing-price-open-new-house {
  background-color: #586371;
  border-color: white;
  border-radius: 2px;
  border-spacing: 1px;
  border-style: solid;
  border-width: 1px;
  color: white;
  display: block;
  font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  left: -1px;
  line-height: 10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -11px;
  width: 30px;
}

＆＃13;

  <div style="height: 25px;margin-top: 40px;">
    <div class="listing-price">
      <i class="listing-price-open-new-house">Open</i>
      $258K
    </div>    
    <div class="listing-price">
      <i class="listing-price-open-new-house">Open</i>
      $9M
    </div>        
  </div>

＆＃13;

＆＃13;

＆＃13;

这可行的原因在于SVG的性质：如果顶级<svg>元素包含定义要绘制区域的viewBox属性，并且有width和height为纵横比不适合viewBox的元素定义，viewBox内容将被缩放和定位，使得它以尽可能大的尺寸拟合到svg元素定义的框的中间

因此，通过将width设置为div的宽度，您可以免费获得中间位置 - 只要SVG具有viewBox属性（它具有），并且没有preserveAspectRatio属性改变这种行为（它没有＆＃39;）。