html - 在 div 中居中文本不起作用

Question

您好，我正在尝试将第一个圆 div 中的文本居中。我认为它目前位于 div 的中心，但是当有多个字符(如“200”)时，它看起来很时髦，如下所示。我有红色圆圈背景，并试图在中心放置文本而不考虑字符。提前谢谢你!

.main {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  display: inline-block;}

.main .label {
  display: inline-block;}

.bg {
  background: red;
  padding: 10px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;}

.bg .label {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  width: 10px;
  display: inline-block;
  margin: auto;}

<div class="main">
  <div class="bg"><span class="label">200</span></div>
    <span class="label">This is the other text need to be</span>
  <div class="bg"><span class="label">0</span></div>
    <span class="label">This is the other text need to be</span>
</div>

Answer 1

尝试在 .bg .label 上设置 width:100% 如下:

.main {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  display: inline-block;}

.main .label {
  display: inline-block;}

.bg {
  background: red;
  padding: 10px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;}

.bg .label {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  width: 100%;
  display: inline-block;
  margin: auto;}

<div class="main">
  <div class="bg"><span class="label">200</span></div>
  <div class="bg"><span class="label">0</span></div>
</div>

编辑:如果你想保持圆的相同宽度并仍然居中文本，你可以替换.bg<中的width:10px;/ 具有以下内容:

.bg {
  /* ... */
  width: 35px;
  padding: 10px 0;
  text-align: center;
  /* ... */
}

所以完整的代码片段看起来像这样:

.main {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  display: inline-block;}

.main .label {
  display: inline-block;}

.bg {
  background: red;
  width: 35px;
  padding: 10px 0;
  text-align: center;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  border-radius: 60%;}

.bg .label {
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: 5px;
  width: 100%;
  display: inline-block;
  margin: auto;}

<div class="main">
  <div class="bg"><span class="label">200</span></div>
  <div class="bg"><span class="label">0</span></div>
</div>