javascript - Align all object in the middle of a div using bootstrap -

i'm hoping can me, here's jsfiddle below.

http://jsfiddle.net/dcskt/4/

here's 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 change of text, keeps aligned left , right perfect, trouble i'm having when make screen smaller.

i want gradually smaller , stay in middle of container, or @ worst smaller using @media

any idea?

if i'm understanding correctly, need 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 you're looking for?