Текстовое центрирование с большими номерами?

В картине проблема есть:Текстовое центрирование с большими номерами?

i.stack.imgur.com/ryV96.png

В деталях: Я пытаюсь держать «voteTotal» центрированный, как она увеличивается до больше (скажем, две или три цифры) номера. Я искал различные свойства «text-align» и css (а также div-wrappers), но я не могу понять, почему большие числа не центрируются должным образом. Есть предположения?

HTML:

<span> 
    <button class="glyphicon glyphicon-menu-up voteButton upvoted"></button> 
    <h4 class="voteTotal">10</h4> 
    <button class="glyphicon glyphicon-menu-down voteButton"></button> 
</span>

CSS:

.voteButton { 
    margin: 0 auto; 
    padding: 0; 
    font-size: 1.5em; 
} 

.voteTotal { 
    display: block; 
    margin: -.5em auto 0 auto; 
    padding: 0; 
    width: 50%; 
    text-align: center; 
}

источник

2015-05-07 Ted

с использованием фиксированной шириной или переменной шириной шрифта? переменная ширина, естественно, будет выглядеть «вне каттера», если цифры имеют разную ширину. –

Можете ли вы продемонстрировать это на http://jsfiddle.net? текущий предоставленный код не похож на ваш образ. – Huangism

Если текст (одно слово) больше его контейнера, то он выравнивается с левым. Чтобы исправить это, увеличьте ширину или используйте другую упаковку слов. – Pluto

Неверно размещать элементы блока внутри встроенных элементов (пролетов). Это в основном вопрос выравнивания по центру и давая H4 достаточно мест:

div { 
 
    display: inline-block; 
 
    text-align: center; 
 
    background: pink; 
 
    padding: 10px; 
 
    min-width: 20px; 
 
} 
 
.voteButton { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    font-size: 1.5em; 
 
} 
 
.voteTotal { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div> 
 
    <button class="glyphicon glyphicon-menu-up voteButton upvoted">></button> 
 
    <h4 class="voteTotal">3</h4> 
 

 
    <button class="glyphicon glyphicon-menu-down voteButton"> 
 
    <</button> 
 
</div> 
 
<div> 
 
    <button class="glyphicon glyphicon-menu-up voteButton upvoted">></button> 
 
    <h4 class="voteTotal">10</h4> 
 

 
    <button class="glyphicon glyphicon-menu-down voteButton"> 
 
    <</button> 
 
</div>

источник

2015-05-07 20:23:41 isherwood

Спасибо. Как вы указали, у меня возникло фундаментальное недоразумение в отношении различных элементов отображения. – Ted

Попытка добавить выравнивания текста: центр родительского класса диапазона.

p.s. Я предлагаю вам удалить эту ширину на 50% с момента голосования и изменить ее на что-то еще. Если вам нужна дополнительная помощь, предоставьте демонстрационную ссылку.

источник

2015-05-07 20:16:57 nevermind

Снятие ширины: 50%, похоже, решило проблему. – Ted

Текстовое центрирование с большими номерами?

ответ

Смежные вопросы