相对div内的中心文本没有大小

Question

我有以下（简化）HTML结构：

<table>
  <tr>
    <td>
      <div class="PromptContainer">
        <span class="Prompt">Prompt text</span>
      </div>
      <input type="text" name="..."/>
    </td>
  </tr>
</table>

和CSS：

.PromptContainer{
   width: 0;
   height: 0;
   position: relative;
   margin: 0 auto;
}

.Prompt{
   bottom: 0;
   padding-left: 0;
   white-space: nowrap;
   position: absolute;
}

我想将span元素放在输入元素上。请注意，由于边对齐规则（.Prompt元素可以与input元素的任何边对齐），因此无法更改.PromptContainer的大小。 span元素内的文本具有可变长度，并且可以比输入元素的宽度长。我无法使用javascript来执行此任务，因为在我的情况下它太无效（大量此类元素）。

修改 图像可视化我拥有的和我想要实现的内容可在此处获取：

编辑2： 让我来描述这个问题的目的。我们正在为以旧技术（用作Windows应用程序）编写的巨大旧应用程序编写新的基于Web的运行时。我们已经从这个应用程序的源代码创建了转​​换器到我们的新环境（ASP.NET）。这个旧应用程序中的所有控件都是绝对定位的，因此我们以相同的方式进行操作。控件（例如输入标签表）具有其位置和大小，以及与之关联的提示文本。提示文本的位置相对于控制，因此我们不知道它在翻译过程中的绝对位置。请注意，它取决于字体设置，文本，控件偏移量和附加提示的控件边缘。

我正在尝试编写CSS规则以将提示放在正确的位置。我已经解决了几乎所有的配置问题，但是我的中心问题很大。

由于绝对定位，我不能使用非零大小的.PromptContainer - 我只知道控件的位置，而不是.Prompt本身。更大.PromptCointainer将完全控制整个控制。

此外，提示文字长于控件宽度不得更改控件的大小。

Answer 1

这应该是文本的中心   .PromptContainer {text-align：center; }

Answer 2

喜欢这个吗？

http://jsfiddle.net/GZ7wR/1/

Answer 3

这个怎么样？

.Prompt { display: inline-block; margin: 0 auto; }