在水平和垂直居中的div上方注入文本[重复]答案

【问题标题】：Inject a text above a div centered horizontally and vertically [duplicate]在水平和垂直居中的div上方注入文本[重复]
【发布时间】：2013-07-10 18:57:08
【问题描述】：

我的页面上有一个 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 上方注入文本。我知道我们有 append jQuery 函数，但不知道如何继续。

非常感谢任何帮助。

【问题讨论】：

查看非常棒的jQuery.position()。它在 1.8 版本中被引入 jQuery UI。它使事物相对于其他元素的定位变得非常容易。

标签： jquery

【解决方案1】：

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

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

这里看起来很简单，因为 span 默认居中。

但是...新的 position() 函数可以让您对定位进行大量控制（而且它很容易使用）。

注意：

此功能在 1.8 版本中添加到 jQuery UI。

这是fiddle。

【讨论】：

这对我来说确实是最好的解决方案。谢谢。
很高兴我能帮上忙。 found this little gem的那天我很开心！

【解决方案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'});

【讨论】：

查看新的jQuery.position() 函数如何使其变得更容易：fiddle。 注意：您必须添加 jQuery UI 1.8 或更高版本（但这是值得的）。

【解决方案3】：

一个可能的解决方案：

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

【讨论】：