Align all object in the middle of a div using bootstrap

Question

I'm hoping someone can help me, here's a jsfiddle below.

http://jsfiddle.net/dcsKt/4/

here's the js:

$(document).ready(function() {
var originalFontSize = 12;
var sectionWidth = $('.web-message').width();

$('.web-message span').each(function(){
    var spanWidth = $(this).width();
    var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
    $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1 + "px"});
});
});

If you change any of the text, it keeps aligned with the left and right which is perfect, but the trouble i'm having is that when you make the screen smaller.

I want it to gradually get smaller and stay in the middle of the container, or at worst get smaller by using @media

Any idea?

Answer 1

If I'm understanding correctly, you just need to use $(window).resize . See here:

http://jsfiddle.net/dcsKt/5/

$(window).resize(function() {
    var originalFontSize = 12;
    var sectionWidth = $('.web-message').width();

    $('.web-message span').each(function(){
        var spanWidth = $(this).width();
        var newFontSize = (sectionWidth/spanWidth) * originalFontSize;
        console.log(newFontSize);
        $(this).css({"font-size" : newFontSize+"px", "line-height" : newFontSize/1 + "px"});
    });
});

Is that what you're looking for?