How to attach an image into a bottom middle of a div? - html

Question

I am trying to achieve the following:
And I largely have. The only missing piece is the Svg of the downward arrow. I need it to be in the middle of the div (the green part) irregardless of how wide the div is. I've tried setting .listing-price:after.left to 50% but I don't think it does what it should. I also want the arrow to attach to the bottom of the main div, but I got it there by hardwiring the .listing-price:after.top property.
How do I get the arrow to be in the middle?
Is there a better way of attaching the arrow to the bottom of the div than hardwiring the .top property?
Here is what I have so far:
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

You're lucky, it works just by setting left:0;width:100%; for the arrow:
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>
The reason why this works lies in the nature of SVGs: if the top-level <svg> element contains a viewBox attribute defining the area to draw, and there are a width and height defined for the element where the aspect ratio does not fit that of the viewBox, the viewBox content will be scaled and positioned such that it is fitted at the largest possible size into the middle of the box defined by the svg element.
So, by setting width to the width of the div, you get the positioning in the middle for free - provided the SVG has a viewBox attribute (which it has), and no preserveAspectRatio attribute changing this behavior (which it hasn't).