css - 在不确定父元素高度的情况下子元素的文本如何垂直居中？

问题描述

问 题

<div class="clearfix">
   <div class="fl">
     1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/>
   </div>
   <div class="fr" style="height:100%;">
       <div class="di">
            <div class="dc">
                哈哈哈
            </div>
       </div>
   </div>
</div>
.fl { float: left }
.fr, .right { float: right }
.clearfix:after { content: ""; display: table; clear: both }
.clearfix { zoom: 1 }
.di{display:inline-block;}
.dc{display:table-cell;vertilcal-align:middle;vertical-align: middle;text-align:center;}
.dc span{vertilcal-align:middle;}

fl元素里的内容不确定，fr元素里的内容根据撑起来的clearfix的高度垂直居中。我是用浮动+table-cell无法实现，不知道有什么好的方法实现这种效果？
demo在这里https://jsfiddle.net/j2ansrmk/2/

解决方案

代码太混乱了。。

首先你的vertical写成vertilcal...
然后你的clearfix容器没有设置高度，高度是撑开的，所以它的子元素设置height:100%;完全是无用的。
再者：table-cell的元素的父元素要设置为display:table才会生效，你这里没有
最后，你需要居中的元素是嵌套在di这个div里的，vertical垂直居中对多层嵌套的子元素是不起作用的。。

这篇关于css - 在不确定父元素高度的情况下子元素的文本如何垂直居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！