How to align text in middle of div with multi resolution font size

Question

I made a block it contain two different types of text one represent the sign which has to come on the top right side of the block while the other span text is number which has to be displayed in the middle of the div.

The problem is whatever i do i cant able to make my text number position in the middle of that div. Secondly the same text if i use on different resolution than my box works fine and it automatically re-size and adjusted its width and height through my JS code but the font always remain as same size. I have used percentage in font size in thought it will increase the size on larger resolution but it didnt work. I have to use this html in mobile phones and each mobile phone has different resolution where this block has to be shirnk or get large based on the resolution size but Font is not getting adjust at all. i am kind of a new person in css and html5 kindly help me to achieve this goal.

here is the fiddle preview of my code http://jsfiddle.net/E2vbe/

here is my code

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

my 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

Check out this Working Fiddle

my solution works without fixing the line-height (its better not to fix it, in case of multiple lines, or different font sizes)

Tested on : IE10, IE9, FF, Chrome

without changing the markup: add this to your 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;
}

also you can remove the text-align:center; & vertical-align:middle; from .cardPile2 rule.

Answer 2

I created a function to perform what you're looking for (I think). I believe it will work for you in most if not all circumstances... multiple lines, etc...

I also had to update a few of your styles to get it done but here is a WORKING FIDDLE .

Here is the function:

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'});
    });
}

Let me know if that gets the job done for you.

EDIT

I've updated the fiddle to scale the fonts proportionally as well. Edited function is above.

Answer 3

Apply line-height css property to spans like this

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

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

Answer 4

To make make it responsive, I have given the padding in % . This might be what you want. http://jsfiddle.net/E2vbe/15/ And the font-size can be changed using media queries instead of JS for different screen resolutions.