I'm working on implementing a feature for an online shop where new items are added to the cart, and I want to display the number of new items added. However, I am facing a challenge in centering the text that displays the number, especially when the number can range from single digits to up to four digits.
https://i.sstatic.net/vFnAn.png
Currently, this is how it appears, but my goal is to have the text centered regardless of the number. I attempted to use fixed positioning on a div element and then center the text inside it, but this approach did not yield the desired result.
<div>
<p id="shoppingCartDot">●</p>
<span id="shoppingCartNumberDiv">
<p id="shoppingCartNumber"></p>
</span>
</div>The above code snippet represents my HTML structure.
#shoppingCart{
position: fixed;
top: 0px;
right: 0px;
padding: 10px;
padding-bottom: 4px;
color:#ac8010;
font-size: 40px;
}
#shoppingCart:hover{
font-size: 41px;
}
#shoppingCartNumber{
position: fixed;
transform: translate(-170%, 0);
color: #ac8010;
font-size: 15px;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
cursor: pointer;
}
#shoppingCartNumberDiv{
position: fixed;
top: 4px;
right: 10px;
}
#shoppingCartDot{
position: fixed;
top: -30px;
right: 0px;
color:#02029e;;
font-size: 60px;
}The CSS provided corresponds to styling the HTML elements.
If achieving the desired effect through the current method is not feasible, I am open to exploring alternative approaches to accomplish the intended outcome.