Question

我目前有一个以数字为中心的区块，并且在悬停时我想增加数量，但是，我正在使用的Google webfont（蒙特塞拉特），角色似乎有不同的宽度，当你悬停整个数字略有偏移，以便集中。

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

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

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

有没有办法获得＆＃34; 4＆＃34;在46/47中，在中心对齐时不动？并且只改变6/7？

我无法想办法做到这一点！这只发生在一些字体中，我想使用蒙特塞拉特，所以希望有一个聪明的技巧来实现这一点！

由于

Answer 1

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

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

<强> jsFiddle example

Answer 2

您希望字符具有相同的宽度，使用等宽字体这很容易，但您不能仅使用CSS将字体强制转换为等宽字体。

解决方案是将字符放在单独的元素中并赋予它们固定的宽度。

<div class="block">
    <div class="one"><span class="char">4</span><span class="char">6</span></div>
    <div class="two"><span class="char">4</span><span class="char">7</span></div>
</div>

.char {
    display: inline-block;
    width: 0.6em;
    text-align: center;
}

http://jsfiddle.net/ehpv2/3/

Answer 3

这对我有用DEMO

@import url(http://fonts.googleapis.com/css?family=Montserrat);

    .block { font-size: 4em; font-family: 'Montserrat', sans-serif; width:100%; height: 100px; text-align: center; }

    .one { display: inline-block;width:60px; }

    .two { display: none; width:60px;  }
    .block:hover .two { display: inline-block; }
    .block:hover .one { display: none; }

在具有更改值的块上使用text-align：center

3 个答案: