Html Question posted in
Some basic documentation can be found here.

Html – Centering text inside a fixed objects position

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

enter image description here

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.

      <div>
        <p id="shoppingCartDot">●</p>
        <span id="shoppingCartNumberDiv">
          <p id="shoppingCartNumber"></p>
        </span>
      </div>

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?

Tags:

2

Answers


  1. 0

    You can make it simply, use a div for the badge and set the display to flex then center with justify-content and align-items. It’s to you to style it as you wish.

    #badge {
  height: 30px;
  width: 30px;
  padding: 2px;
  background: blue;
  border-radius: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
    <div id='badge'>
  +99
</div>
    Login or Signup to reply.
  2. 0

    i do it, please check this demo

    .cart-div {
    position: relative;
    width: fit-content;
    height: fit-content;
}

.shopping-cart {
    font-size: 60px;
}

.number-dot {
    position: absolute;
    top: 0;
    right: 0;
    background-color: blue;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
}
    <div class="cart-div">
      <div class="shopping-cart">&#128722</div>
      <div class="number-dot">12</div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search