html - 使用文本对齐 : center on a block with changing value

Question

我目前有一个以数字为中心的 block ，悬停时我想增加数字，但是，使用我使用的 Google 网络字体 (Montserrat)，字符似乎有不同的宽度，当您悬停时整个数字略微移动以居中。

这是一个快速的 JSFiddle 来说明悬停时的问题:

http://jsfiddle.net/ehpv2/

<div class="block">
    <div class="one">46</div>
    <div class="two">47</div>
</div>

悬停时，46 消失，47 出现在它的位置。

有没有办法让 46/47 中的“4”在居中对齐时不动？并且只更改 6/7？

我想不出办法了!这只发生在某些字体中，我想使用 Montserrat，所以希望有一个聪明的技巧来实现这一点!

谢谢

Answer 1

不要使用 text-align:center 并将 div 设置为 display:inline-block，而是给它们一个宽度并使用 margin:0 auto 使它们居中。

.one,.two {
    width:80px;
    margin:0 auto;
}

jsFiddle example