3

オーバーフローを許可する固定の div 内でテキストを中央に配置しようとしていますが、div 内でテキストを中央に配置できないようです。

私が何を意味するかを示すためにjsfiddleを作成しました：http://jsfiddle.net/mdHKZ/3/

問題は、テキストが div からオーバーフローし始めると、中央に配置されなくなることです。ただし、div を拡張することはできません。これは、固定幅の div を持つという目的を無効にするためです。私がやろうとしていることを達成する方法はありますか?

4

3 に答える 3

4

これを直接の css で動的に行うことはできないと思いますが、事前にテキストの幅がわかっている場合は、内容に負の margin-left を指定できます: jsFiddle

これを動的に実行したい場合 (つまり、テキストの幅に関係なくテキストを小さな div の中央に配置する場合)、javascript を使用する必要があると思います。

編集：これは、jQueryを使用して設定されたマージンを持つ更新されたjsFiddleです：jsFiddle

HTML:

<div class="contents">
    <span id="hack">Sample Text Sample Text Sample Text</span>
</div>

jQuery:

var $hack = $('#hack');
var innerWidth = $hack.width();
var outerWidth = $hack.parent().width();
if(innerWidth > outerWidth) {
    var marginLeft = -1 * (innerWidth - outerWidth)/2;
    $hack.css('margin-left', marginLeft);
}

CSS:

.contents {
  margin-left: 150px;
  text-align: center;
  width: 100px;
  white-space: nowrap;
  border: 1px solid;
  margin-bottom: 20px;
}
于 2012-08-06T17:16:42.683 に答える
0

内部の div の幅がどうなるか知っていますか? 可変幅に基づいて自動的に実行できるかどうかはわかりません。静的な幅で中央に移動できました:

<div style="margin-left: 150px; text-align: center; width: 100px; overflow: visible; white-space: nowrap; border: 1px solid; margin-bottom: 20px;">
    <div style="width:200px;margin-left:-100px;">Sample Text Sample Text SamText Sampl eple </div>
</div>

幅を 200px に設定し、その半分を margin-left で差し引く必要がありました。「margin-left: 50%」のようなより一般的なもので動作させることができませんでした。これは、外側の div から -75px (150px の半分) だけ左にシフトするためです。

于 2012-08-06T17:22:55.883 に答える
0

オーバーフローを「visible」ではなく「auto」に変更

于 2012-08-06T16:52:12.040 に答える