可以扩大父容器大小的子元素垂直对齐

我正在尝试根据以下内容创建一个布局，其中问题的帮助文本在问题容器中垂直对齐。可以扩大父容器大小的子元素垂直对齐

enter image description here

我的问题是如何在帮助文本超出的问题控件的高度展开父容器。按：

enter image description here

我知道这是因为我使用绝对定位垂直居中帮助文本，因此不包含在父容器的流动。不过，我不确定这个问题的最佳css解决方案。

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

我已经创建了下面捣鼓来说明我的现有解决方案/问题：

jsfiddle

我希望对这个问题的最佳结构中的任何意见。

来源

2015-07-20 Chris Prior

如果使用'位置：absolute'在你的提示是必须的，我不认为有办法让它只用CSS来增加父母的身高。 – lucasnadalutti

除非您使用Javascript，否则您无法展开基于绝对子项的父项。 – LcSalazar

谢谢，这是我得出的结论。有没有一种很好的方式来垂直居中父容器中的工具提示而不使用绝对定位？ –

那么，你不能只用CSS来扩展基于绝对定位的div的父容器。

如果您之前的问题是垂直居中，我会建议您采用不同的方法。您可以将您的容器变成display: table元素，并将其作为主要内容，并且工具提示将作为display: table-cell。这样，您将能够以更稳固的方式将其放置在右侧，垂直对齐将与vertical-align: middle配合使用。

这将使您的容器符合工具提示。另外，我加入了position:relative; left:20px;错放它一点点的权利，因为它是在你的例子...

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

<div class="container cf"> 
 
    <div class="content"> 
 
     This is the form content 
 
    </div> 
 
    <div class="text"> 
 
     <div>Some text that is smaller than the control height</div> 
 
    </div> 
 
</div> 
 

 
<div class="container cf"> 
 
    <div class="content"> 
 
     This is the form content 
 
    </div> 
 
    <div class="text"> 
 
     <div>Some text that is bigger than the control height, some text that is bigger than the control height, some text that is bigger than the control height. 
 
     </div> 
 
    </div> 
 
</div>

来源

2015-07-20 16:20:52 LcSalazar

谢谢，这就是我一直在寻找的！ –

可以扩大父容器大小的子元素垂直对齐

回答

相关问题