在div上方水平和垂直居中插入文本 [英] Inject a text above a div centered horizontally and vertically

问题描述

我的页面上有一个div，感谢jQuery，我想在该div上方叠加一个文本.此文本必须水平和垂直居中.我需要向用户显示此区域允许在其中放置文件.

I have a div on my page and I would like to superpose a text above this div thanks to jQuery. This text must be centered horizontally and vertically. I need this to show to the user this zone is allowed to drop a file in it.

<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/

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

我不知道如何继续在div上方插入文本.我知道我们有附加的jQuery函数，但不知道如何进行.

I have no idea how to proceed to inject a text above my div. I know we have the append jQuery function but no idea how to proceed.

非常感谢您的帮助.

推荐答案

您可以使用新的

You can make it very simple by using the new jQuery.position() function:

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

在这里看起来非常简单，因为默认情况下跨度居中.

It looks really simple here, because the span gets centered by default.

但是...新的 position()函数使您可以对定位进行大量控制(并且易于使用).

But... The new position() function gives you a ton of control over positioning (and it's easy to use).

注意:

此功能已在1.8版的 jQuery UI 中添加.

This function was added to jQuery UI in version 1.8.

这是小提琴.

这篇关于在div上方水平和垂直居中插入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！