How to place the texts to be in the right side of the blue circle using HTML and CSS?-CodePudding

if I may, could you please help me get this sorted out? I created a circle using HTML and CSS, and inside the circle, I added text. I have other texts that need to be placed on the right side of the circle. Right now, the texts are on the right side but they are like right justified. There's too much gap. I was hoping the texts would be floating to the right side of the circle.

Please check my codes:

.badge {
  height: 70px;
  width: 70px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: #286aba;
  color: #ffffff;
  font-family: Poppins, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"
}

<div>
  <span >Step 1</span><span style="position: absolute; right : 0px;
    top: 0px; text-align: left">The text should be on the right side of the blue circle with less gap.</span>
</div>

Please check this screenshot, https://prnt.sc/gwQxXPACawjO

Thanks a lot.

CodePudding user response：

**If you want to place a text in right side of the circle..the circle is aleady in the left side...so try this. **

try this`

  <div>
   <style>
  .badge {
   width: 70px;
  display: table-cell;
  text-align: center;
   vertical-align: middle;
    border-radius: 50%;
   background:#286aba;
   color:#ffffff;
   font-family: Poppins, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, 
   "serif"
  }


  </style>

    <div >Step 1</div>

   <span style="position: absolute; left : 70px;
   top: 5px;">
   The text should be on the right side of the blue circle with less gap.
   </span>

    </div>

   </body>
   </html>`

CodePudding user response：

I changed it a bit and now it works. (See the snippet)

There are way more (and more efficient) ways of fixing your problem, if you don't want to use this solution, you could take a look at some other solutions:

Link 1

Link 2

Link 3

<div id="test-div">
    <style>
    
    #badge {
    height: 70px;
    width: 70px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background:#286aba;
    color:#ffffff;
    font-family: Poppins, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"
}
    #test-div {
    display: table;
}

    #test-span {
    display: table-cell;
    vertical-align: middle;
}
        </style>
   <span id="badge">Step 1</span><span id="test-span">The text should be on the right side of the blue circle with less gap.</span>
 </div>