Центрирование текста внутри фиксированного положения объектов ⇐ CSS

[Anonymous]

I'm making the idea of "new items" for a shop online. When you add a new item to the cart, it would display how many new ones you added





Here is what it looks like now, I want to be able to center that text no matter the number. Assuming the number can go from single digits to up to 4 digits.

I tried playing around with putting a fixed position on a div and then centering text inside that but it didn't work.

●



The above code is my HTML

#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; } Above text is the CSS for the HTML

If this isn't possible, is there another way to get the effect I'm looking for?


Источник: https://stackoverflow.com/questions/781 ... s-position