Центрирование текста в 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

Попробуйте установить width:100% на .bg .label следующим образом:

.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>

EDIT: если вы хотите сохранить одинаковую ширину для CI rcle и до сих пор центрировать текст, можно заменить width:10px; в .bg со следующим:

.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>

Answer 2

попробовать что-то вроде это. Я предполагаю, что вы в порядке с фиксацией ширины и высоты ваших маленьких кругов? Если это так, это решение должно работать на вас. Выгода здесь заключается в том, что ваши круги остаются неизменными визуально независимо от значений, размещенных внутри них.

Вы можете настроить ширину/высоту круга по своему вкусу, и любое значение, которое вы там разместите, останется центрированным. Имейте в виду, что с этим решением ваши круги не будут масштабироваться, чтобы соответствовать длине значения, если она будет расширяться за пределы. Я предполагаю, что это поведение, которое вы ищете, хотя, учитывая исходный код.

Кроме того, обратите внимание, что вам нужно будет отрегулировать верхний край, чтобы поместить значения в соответствии с высотой окружностей, если вы их измените. Надеюсь это поможет!

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

 
.bg .label { 
 
    display: inline-block; 
 
    margin: 9px auto 0; 
 
    text-align: center; 
 
    width: 38px; 
 
}

<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>