如何将图像附加到div的底部中间？
如何将图像附加到div的底部中间？
提问于 2017-12-19 23:25:54
我正努力做到以下几点：
我很大程度上做到了。唯一缺失的部分是向下箭头的Svg。我需要它在中间的div (绿色的部分)，而不管有多宽的div。我尝试过将.listing-price:after.left设置为50%，但我认为它做不到它应该做的事情。我还想要将箭头附加到主div的底部，但是我通过硬连接.listing-price:after.top属性实现了它。
- 我怎么才能把箭夹在中间？
- 是否有比硬布线
.top属性更好地将箭头附加到div底部的方法？
以下是我到目前为止所拥有的：
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-20 00:02:01
幸运的是，只需为箭头设置left:0;width:100%;即可：
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;
} <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>
这一工作的原因在于svg的性质:如果顶级<svg>元素包含定义要绘制区域的viewBox属性，并且为不符合viewBox的长宽比的元素定义了width和height，则viewBox内容将被缩放和定位，以便将其以最大的大小安装到svg元素定义的框的中间。
因此，通过将width设置为div的宽度，您可以免费获得位于中间的位置--条件是SVG有一个viewBox属性(它有)，并且没有改变此行为的preserveAspectRatio属性(它没有)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47896693
复制相关文章
相似问题
腾讯云开发者
