0

我在网上得到了这段代码，它满足了我对最小高度 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>
4

4 回答 4

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;
}

工作小提琴

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

于 2013-03-29T08:18:45.210 回答
0

我解决了。谢谢你们。但是无论内容是什么，我都需要一个最小高度，所以我使用了上面的 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>
于 2013-04-03T11:23:29.947 回答
0 
<div>

我
希望
此
内容 垂直 居中 对齐
_
_


版权所有 2012 - xyz

于 2013-03-29T08:50:09.157 回答
0

I would use javascript/jQuery for this. This is just to point you out in the right direction

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

what this does: it checks your window heigh and your div height. it subtracts from each other. After that this value is divided by 2 (for equal space between top and bottom) The margin-top is changed by this so you would have the equal space. This doesnt make the div Center fixed position (if you scroll it still changes) so if you want to change that you need to make some CSS adjustments to make it fixed.

于 2013-03-29T08:24:17.137 回答