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>

我试图让一个Class在auto上包含“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解决方案可能更好。

Answer 2

Flexbox真正改变了游戏，以流畅的方式对齐元素。将您的容器元素定义为--exitcrash，然后对齐您将使用的内部子元素display: flex

justify-content: center; align-items: center;

你会注意到＆＃34;你好＆＃34;和＆＃34;世界＆＃34;将在.container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; } .parent { height: 500px; width: 500px; position: relative; } <div class="parent"> <div class="container"> <p>Hello</p> <p>World</p> </div> </div>元素中垂直和水平居中。

Answer 3

将height: 60%;替换为padding: 30% 0;。

Answer 4

如果您希望文本在div中水平居中，'text-align：center;'是你的朋友。如果你想让它垂直居中;将内容包装在内部div中，然后对该内部div使用“margin：auto”。当然，你必须给内部div一个宽度;否则，水平中心将无法工作。
如果表是一个选项（否则不鼓励），'valign =“middle”'也适用于表格

Answer 5

检查是否需要：

<html>
<head>
<style type="text/css">
div {
    height: 100px;
    width: 100px;
    background: #ccc;
    text-align: center;
}
p {
    line-height: 100px;
}
</style>
</head>
<body>
<div>
  <p>centered</p>
</div>
</body>
</html>

如何将文本保存在div中，总是在中间？

5 个答案: