Question

我在网上得到了这个代码，它满足了我需要一个最小高度div。但我也希望内容垂直居中对齐。有人可以帮忙吗？我已经在这些论坛中提供了许多选项，但它们不能与这个特定的css结合使用。我必须使用这个特殊的CSS来获得一个最小高度的div。

<html><style type="text/css">
  .prop {
    float:right;
    width:1px;

  }

  #footer {
    clear:both;
    border-top:2px solid #000000;
    text-align:left;
    font-size:80%;
  }

  .min200px {
    height:200px;
  }
  </style>
</html>
<body>

<div>
  <div class="prop min200px"></div>

I want this content to be vertically center aligned

  <div id="footer">
    Copyight 2012 - xyz
  </div>
</div>



</body>

Answer 1

您没有将文本包装在任何元素中。这样做很难。

将文本保留在子元素中，并将display:inline-block; vertical-align:middle;提供给它，并将line-height提供给父元素，其值等于元素的高度。稍后，当line-height值继承到子元素时，也要将line-height赋予子元素以使其看起来很好。

更改了HTML：

<div>
    <div class="prop min200px">
        <div>I want this content to be vertically center aligned</div>
    </div>
    <div id="footer">Copyight 2012 - xyz</div>
</div>

更改了CSS ：

.prop{
    line-height:200px;
}
.prop>div{
    line-height:20px; /* or  1em */
    display:inline-block;
    vertical-align:middle;
}

<强> Working fiddle

仅供参考，您提到您使用的是min-height财产。但你没有在代码中的任何地方使用它。（您刚刚声明了该属性名称的类名称。）

Answer 2

您好我会使用javascript / jQuery。这只是为了指出你正确的方向

<div id="center">
  <div class="prop min200px"></div>
  I want this content to be vertically center aligned
  <div id="footer">
      Copyight 2012 - xyz
  </div>
</div>

<script type="text/javascript">
    var wh= window.height,
        h= $('#center').height(),
        x = (wh-h)/2;
    $('#center').css({"marginTop":"x"})
</script>

这是做什么的：它检查你的窗户高度和你的div高度。它相互减去。之后，此值除以2（顶部和底部之间的空间相等）边缘顶部由此改变，因此您将拥有相等的空间。这不会使div中心固定位置（如果你滚动它仍然会改变）所以如果你想改变它，你需要进行一些CSS调整以使其固定。

祝你好运，有一天。

Answer 3

<div>

我是想要这
内容
到
是的垂直的中心
对齐

Copyight 2012 - xyz

Answer 4

我解决了。谢谢你们。但无论内容是什么，我都需要一个最小高度，因此我使用了上面的css代码。但除此之外，我希望我的内容集中在一起。所以我使用下面的代码。额外的css是我的其他需求：

@font-face { font-family: MyCustomFont;  src: url("file:///fonts/Roboto-Regular.ttf") }body,html,table { font-family: MyCustomFont; font-size:14.0pt;} body,html {text-align: center;vertical-align:middle;line-height: normal; margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;vertical-align: middle;text-align: center;}body {vertical-align: middle;text-align: center;}.minHeight { float:right; width:1px; height:94px; }

<div class="minHeight"></div><table height=94px align=center><tr>
<td align=center>My centered text </td></tr></table>

最小高度Div对齐

4 个答案: