html - 如何将文本保留在 div 中，始终位于中间？

Question

我试图让文本停留在可调整大小的 DIV 的中间。这是示例:

CSS

#rightmenu {
  position: absolute;
  z-index: 999999;
  right: 0;
  height: 60%;
  text-align: center;
}

HTML

<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>

我试图创建一个类来包含带有“margin-top 和 margin-bottom”的文本，它们都处于自动状态，但不起作用。

Answer 1

如果你不关心 IE7 支持，你可以这样做:

HTML:

<div id=wrap>
  <div id=inside>
    Content, content, content.
  </div> 
</div>

CSS:

#wrap {
    /* Your styling. */
    position: absolute;
    z-index: 999999;
    right: 0;
    height: 60%;
    text-align: center;

    /* Solution part I. */
    display: table;
}

/* Solution part II. */
#inside {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

代码:http://tinkerbin.com/ETMVplub

如果您对 JavaScript 没问题，您可以试试这个 jQuery 插件:http://centratissimo.musings.it/但由于它似乎也不支持 IE7，因此 CSS 解决方案可能更好。