html - フロートの横にテキストを水平方向に正確に中央揃えするにはどうすればよいですか

Question

一部のテキストを右にフロートさせたコンテナと、コンテナ全体に対して水平方向に中央揃えにしたい他のテキストがあります。以下のコードは、フローティング テキストの左側のスペースに対してのみ、テキストを中央揃えにします。コンテナーの幅は画面サイズによって異なる場合があり、中央と右のテキストはどちらも動的で、文字数が多かれ少なかれ含まれる可能性があります。

#holder {
    margin:15px;
    padding:15px;
    background-color:#000;
    color:#fff;
}
#right_text {
    float:right;
}
#center_text {
    text-align:center;
}
<div id="holder">
    <div id="right_text">back to page 3</div>
    <div id="center_text">load results 10-30 of 312</div>
</div>

中央のテキストが重なる可能性があるため、正しいテキストを絶対に配置したくありません。中央揃えのテキストは、代わりに正しいテキストに到達する前にワードラップし、水平方向にも中央揃えにする必要があります。

右のテキストは動的で、必要なパディングの量がわからないため、中央のテキスト コンテナーに左/右のパディングを追加したくありません。

http://jsfiddle.net/eJFw6/8/

Answer 1

したがって、javascript ソリューションが推奨され、これを思いつきました。

$(document).ready(function() {
    $("#center_text").css('padding','0px '+$("#right_text").outerWidth()+'px');
});

また、右のテキストに左と下のパディングを追加して、コンテナが細くなった場合に中央のテキストがうまく折り返されるようにしました。

#holder {
    margin:15px auto;
    padding:15px;
    background-color:#000;
    color:#fff;
    width:280px
}
#right_text {
    float:right;
    padding-left:15px;
    padding-bottom:50px;
}
#center_text {
    text-align:center;
}
<div id="holder">
    <div id="right_text">back to page 3</div>
    <div id="center_text">load results 10-30 of 312</div>
</div>

http://jsfiddle.net/littleRoom/eJFw6/12/

Answer 2

#center_text {
    text-align:center;
    float:left;
}