html– 可以扩展父容器大小的子元素的垂直对齐方式

概述我正在尝试按照以下方式创建布局,其中问题的帮助文本在问题容器中垂直对齐.我的问题是当帮助文本超出问题控件的高度时如何扩展父容器.按照：我知道这是因为我使用绝对定位来垂直居中帮助文本,因此它不包含在父容器的流中.但是我不确定这个问题的最佳css解决方案.position: absolute; top: 50%; transform: translateY(-5

我正在尝试按照以下方式创建布局,其中问题的帮助文本在问题容器中垂直对齐.

我的问题是当帮助文本超出问题控件的高度时如何扩展父容器.按照：

我知道这是因为我使用绝对定位来垂直居中帮助文本,因此它不包含在父容器的流中.但是我不确定这个问题的最佳CSS解决方案.

position: absolute;top: 50%;transform: translateY(-50%);

我创建了以下小提琴来说明我现有的解决方案/问题：

jsfiddle

对于这个问题的最佳结构,我将不胜感激.

最佳答案好吧,你不能仅使用CSS扩展基于绝对定位的div的父容器.

如果您之前的问题是垂直居中,我会建议您采用不同的方法.您可以将容器转换为display：table元素,并将两者作为主要内容,并将工具提示作为display：table-cell.这样,您将能够以更加可靠的方式将其放置在右侧,垂直对齐将与vertical-align：mIDdle一起使用.

这将使您的容器适合工具提示.另外,我添加了位置：相对;左：20像素;把它放错一点,就像在你的例子中一样……

.cf:before,.cf:after {  content: " "; /* 1 */  display: table; /* 2 */}.cf:after {  clear: both;}.container {    position: relative;    border: 1px #000 solID;    display: table;    margin-bottom: 50px;}.content,.text {    display: table-cell;    vertical-align: mIDdle;}.text {        wIDth: 22.5%;}.text > div {    background-color: #ccc;    margin: 5px;    padding: 10px;    position: relative;    left: 20px;}

总结

以上是内存溢出为你收集整理的html – 可以扩展父容器大小的子元素的垂直对齐方式全部内容，希望文章能够帮你解决html – 可以扩展父容器大小的子元素的垂直对齐方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1122448.html