如何保持文本里面的div，总是在中间？ [英] How to keep text inside a div, always in the middle?

问题描述

我想让文本停留在可调整大小的DIV中间。
以下是示例：

I'm trying to make text stay in the middle of a resizable DIV. Here's the example:

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>

我试图让一个Class包含margin-底部都在自动，但不工作。

I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.

推荐答案

如果您不关心IE7支持，您可以这样做：

If you don't care about IE7 support, you can do it like that:

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解决方案可能更好。

If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.

这篇关于如何保持文本里面的div，总是在中间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！