Question

我试图将文本置于一个固定的div内部，这将允许溢出，但我似乎无法将其置于div的中心。

我已经找到了一个jsfiddle来告诉你我的意思：http://jsfiddle.net/mdHKZ/3/

问题是，一旦文本开始溢出div，它将不再居中。但是，我无法扩展div，因为这会破坏我有固定宽度div的目的。有没有办法实现我想要做的事情？

Answer 1

我认为不可能使用直接css动态执行此操作，但如果您提前知道文本的宽度，则可以在内容上指定负边距：jsFiddle

如果您想动态执行此操作（即将文本居中放在任意宽度的文本的小div中），我认为您必须使用javascript。

编辑：这是一个更新的jsFiddle，使用jQuery设置边距：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;
}

Answer 2

将溢出更改为“自动”而非“可见”

Answer 3

你知道里面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％”这样更通用的东西，因为它只会从outter div向左移动-75px（150px的一半）

在小型div中的中心文本

3 个答案: