Question

我的页面上有一个div，由于jQuery，我想在这个div上面叠加一个文本。此文本必须水平和垂直居中。我需要这个向用户显示该区域被允许删除文件。

<div class="dropzone" style="width: 300px; height: 200px; background-color: gray">
    Lorem ipsum blah blah... Lorem ipsum blah blah... Lorem ipsum blah blah... Lorem ipsum blah blah... Lorem ipsum blah blah... Lorem ipsum blah blah... 
</div>

JsFiddle：http://jsfiddle.net/Dd2jq/

我不知道如何在我的div上面注入一个文本。我知道我们有附加jQuery函数但不知道如何继续。

非常感谢任何帮助。

Answer 1

您可以使用新的jQuery.position()功能使其非常简单：

var $span = $('<span/>').text('Hello, world');
$span.position({ of: $('.dropzone') });

这里看起来很简单，因为默认情况下跨度会居中。

但是......新的 position（）功能让您可以对定位进行大量控制（并且易于使用）。

注意：

此功能已添加到1.8版的 jQuery UI 。

这是fiddle。

Answer 2

这是你在找什么？ js fiddle

var text = 'Some text here';
var span$ = $('<span></span>').text(text);
var div$ = $('.dropzone');
var position = div$.position();

$('body').append(span$);


span$.css( {position:'absolute', left:position.left + (div$.width() / 2) - (span$.width() / 2)   , top:position.top + (div$.height() / 2) - span$.height() /2, zIndex:10000, background:'#ffffff'});

Answer 3

可能的解决方案：

$(".dropzone").before("<p>test!</p>");

在水平和垂直居中的div上方注入文本

3 个答案: