javascript - 使用引导程序在 div 中间对齐所有对象

Question

我希望有人可以帮助我，下面是一个jsfiddle。

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

这是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"});
});
});

如果您更改任何文本，它会与左右对齐，这是完美的，但我遇到的问题是当您缩小屏幕时。

我希望它逐渐变小并留在容器的中间，或者最坏的情况是使用@media 变小

任何想法？

Answer 1

如果我理解正确，您只需要使用$(window).resize. 看这里：

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

那是你要找的吗？