如何使用HTML和CSS将文本放在蓝色圆圈的右侧?

Question

如果可以的话，你能帮我整理一下吗?我用HTML和CSS创建了一个圆圈，并在圆圈内添加了文本。我还有其他文本需要放在圆圈的右侧。现在，文本在右边，但它们是正确的。差距太大了。我希望文字能浮在圆圈的右边。

请检查我的代码:

.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 class="badge">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>

请查看此截图，https://prnt.sc/gwQxXPACawjO

谢谢你。

Answer 1

我改变了一下，现在它可以工作了。(参见代码片段)

有更多(和更有效)的方法来解决你的问题，如果你不想使用这个解决方案，你可以看看其他的解决方案:

链接1

链接2链接

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>

Answer 2

**如果你想在圆圈的右边放置文本，圆圈已经在左边了…所以试试这个。* *

试试这个'

<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 class="badge">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>`