如何使用多分辨率字体大小对齐div中间的文本

Question

我做了一个块，它包含两种不同类型的文本，一种代表必须位于块的右上方​​的符号，而另一种跨度文本是必须显示在div中间的数字。

问题是无论我做什么我都无法使我的文本编号位于该div的中间位置。 其次，相同的文字，如果我使用不同的分辨率比我的盒子工作正常，它通过我的JS代码自动重新调整大小和调整其宽度和高度，但字体始终保持相同的大小。 我已经使用了字体大小的百分比，因为它会增加更大分辨率的大小，但它没有用。 我必须在手机中使用这个html，并且每个手机都有不同的分辨率，这个块必须是shirnk或根据分辨率大小变大，但Font根本没有调整。 我是一个新的css和html5的人，请帮助我实现这个目标。

这是我的代码http://jsfiddle.net/E2vbe/的小提琴预览

这是我的代码

$(function() {
    var pilewidth2 = $('#A').width();
    $('#A').height(pilewidth2);
    $('#B').height(pilewidth2);
}); //this make my div with same height and width on any resolution

<div id="A" style="vertical-align:middle;" class="cardPile2">
    <span class="TileScore">$</span>
    <span class="TileCharacter">44</span>
</div>
<div id="B" class="cardPile2">
    <span class="TileScore">%</span>
    <span class="TileCharacter">33</span>
</div>

我的css

.cardPile2 {
    margin: 0 auto;
    background: #ffd;
    float: left;
    width: 9%;
    padding-bottom: 0;
    border: 1px solid #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 0 5px;
    background: #666;
    color: #fff;
    opacity:0.9;
    text-align:center;
    vertical-align:middle;
}

.TileScore
{
    float:right;font-size:small;padding-right:10px;
}

.TileCharacter
{
    color:yellow;
}

Answer 1

看看这个工作小提琴

我的解决方案在不修复行高的情况下工作（最好不要修复它，如果是多行或不同的字体大小）

测试 ：IE10，IE9，FF，Chrome

在不更改标记的情况下：将其添加到CSS中

.TileCharacter
{
    color:yellow; /*From your CSS*/
    display: inline-block;
    text-align:center;
    width: 100%;
}
.TileCharacter:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

你也可以删除text-align:center; ＆ vertical-align:middle; 来自.cardPile2规则。

Answer 2

我创建了一个函数来执行你正在寻找的东西（我想）。 我相信它会在大多数情况下对你有用，如果不是所有情况......多行等等......

我还必须更新你的几个样式来完成它，但这是一个工作的好词 。

这是功能：

function positionText() {
    $('.cardPile2').each(function (i, ele) {
        var width = $(this).outerWidth();
        $(this).css({height: width + 'px'});

        // scale font sizes
        var charFontScale = 16/86;
        var scrFontScale = 13/86;
        var charFontSize = Math.round(width * charFontScale);
        var scrFontSize = Math.round(width * scrFontScale);

        // top right align the characters
        var chr = $(this).find('.TileCharacter').css({'font-size': charFontSize + 'px'});
        var chrWidth = $(chr).outerWidth();
        var chrHeight = $(chr).outerHeight();
        $(chr).css({top: Math.floor(width/2 - chrHeight/2) + 'px', left: Math.floor(width/2 - chrWidth/2) + 'px'});

        // center the scores
        var score = $(this).find('.TileScore').css({'font-size': scrFontSize + 'px'});
        var scrWidth = $(score).outerWidth();
        $(score).css({left: (width - scrWidth) + 'px'});
    });
}

如果能为您完成工作，请告诉我。

编辑

我已经更新了小提琴以按比例缩放字体。 编辑功能在上面。

Answer 3

将line-height css属性应用于此类跨度

.TileScore
{
    float:right;font-size:small;padding-right:10px;
    line-height:4;
}

.TileCharacter
{
    line-height:4;
    color:yellow;
}

Answer 4

为了使其响应，我给出了％的padding 。 这可能就是你想要的。 http://jsfiddle.net/E2vbe/15/对于不同的屏幕分辨率，可以使用媒体查询而不是JS来更改font-size 。