9

我试图让文本保持在可调整大小的 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”的文本，但不起作用。

4

5 回答 5

16

如果你不关心 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 解决方案可能更好。

于 2012-05-10T17:33:30.350 回答
4

Flexbox以流畅的方式对齐元素，真正改变了游戏规则。将您的容器元素定义为display: flex，然后对齐您将使用的内部孩子justify-content: center; align-items: center;

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

您会注意到“Hello”和“World”都将在.container元素内垂直和水平居中。

于 2016-11-15T00:22:11.907 回答
1

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

于 2012-05-10T17:44:44.757 回答
0

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

于 2012-05-10T17:42:54.963 回答
0

检查是否需要：

<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>
于 2012-05-11T09:01:39.143 回答