gpt4 book ai didi

html - 最小高度 Div 对齐

转载 作者:太空宇宙 更新时间:2023-11-04 15:07:47 33 4
gpt4 key购买 nike

我从网上得到了这段代码,它满足了我对最小高度 div 的需求。但我也希望内容垂直居中对齐。有人可以帮忙吗?我已经浏览了这些论坛中提供的许多选项,但它们不能与这个 particuar 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>

最佳答案

您没有将文本包装在任何元素中。那时很难做到。

将文本保留在子元素中并给 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 属性。但是您还没有在代码中的任何地方使用它。 (您刚刚声明了该属性名称的类名)。

关于html - 最小高度 Div 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15699640/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com