jQuery 动画和文本居中对齐

Question

我一直在努力为一个没有设置高度和宽度的盒子制作动画。到目前为止它的工作，有一个小问题。

该框包含文本按钮，所有按钮都具有相同的宽度并且文本居中。问题是并非所有文本的长度都相同，因此在为较短的文本设置动画时会从左到中滚动。这不是一个大问题，但它看起来有点愚蠢。

代码在下面，这里是一个Fiddle展示。 (我将动画设置为 1500 以使问题更加明显)。如您所见，“短”按钮滚动到中间。如果可能的话，我想要的是将按钮“设置”在中间，以便在设置动画时它们已经处于正确的位置。

我完全不知道这是否可能，但如果是这样，我们将不胜感激。

HTML:

<div id="pref_boxwrap">
    <div id="pref_box" class="prefbox_m1 prefbox_cll">
        <div class="prefbox_mm11 prefbox_cld">Header</div>
        <div class="prefbox_x222 act" _fsc="1,1910">
            <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">Short</span></span>
            </div>
        </div>
        <div class="prefbox_x222 act" _fsc="1,1920">
            <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">This is a longer button <span id="fgr">('+tgr+'%)<span></span></span>
            </div>
        </div>
        <div class="prefbox_x222 act" _fsc="1,1930">
            <div class="prefbox_y222"><span class="sp1 prefbox_clb"><span class="sp2">And another very very very long button <span id="fkl">('+tgr+'%)<span></span></span>
            </div>
        </div>
    </div>
</div>
</div>

CSS:

#pref_boxwrap {
    position: absolute;
    margin-top: 20px;
    margin-left: 35px;
    z-index:2030;
}
.prefbox_m1 {
    position: absolute;
    visibility: hidden;
    font-size: 1em;
    z-index:2926;
    -webkit-box-shadow: 0 14px 14px 0px #000;
    -moz-box-shadow: 0 14px 14px 0px #000;
    box-shadow: -3px -3px 3px 0px #fff;
}
.prefbox_mm11 {
    height: 24px;
    padding: 2px 0 2px 9px;
    color: #fff;
    text-align: left;
    font-weight: bold;
    font-size: 100%;
}
.prefbox_x222 {
    margin: 2px 0;
    padding: 5px;
    background: blue;
}
.prefbox_y222 {
    line-height: 29px;
    white-space: nowrap;
    height: 29px;
    width: 100%;
    color: #fff;
    background: orange;
}
.prefbox_y222 .sp1 {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
.prefbox_y222 .sp2 {
    padding: 0 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

更新 我用下面的答案解决了这个问题，但还有另一个问题，通过动画盒子不再灵活。所以在运行时替换按钮文本或更改字体大小不会再更改框的大小。我通过向 jquery 动画添加 3 行代码解决了这个问题:复制 cointainer 的内容，更改 css 名称并在动画后替换 containercontent。它有点 hacky，但现在运行良好。

这是一个新的工作 FIDDLE

Answer 1

在开始动画之前，在子 div(即标题和按钮容器)上设置一个固定的像素宽度。参见 updated fiddle我在其中添加了这一行:

$("#pref_box > *").outerWidth(x);

在固定宽度的情况下，按钮在整个动画中的大小将相同，并且中心对齐问题将不再存在。