line-height:100%为啥失效呢？

冯纪忠雄

Oct 24, 2018

这里确实是line-height:100%出问题了，不是vertical-align:middle失效；因为这里line-height:100%的100%代表的是div内元素本身height的100%（即1倍），因此这里要想达到将元素竖向上也放在div的中间就必须div的line-height设定成具体多少像素，即以px为单位来弄才会起效果。

例如将div的line-height设置成300px

<style>
div#outer_div {
    line-height:300px;
    width:100%;
    height:100%;
    text-align:center;
    display:block;
}
div#outer_div span {
    display:inline-block;
    vertical-align:middle;
}
</style>

<div id="outer_div">
    <span>需要放在中部的文字</span>
</div>

不过这里有个问题div的高度是100%未必是300px，因此这时最好的解决方式就是在js脚本中来动态解决这个事情。不过也可以直接利用我自己开发的一个轻量的js前端库来解决这个问题。我给这个js前端库命名为fuck-line-height.js

<script src="jquery.min.js"></script>
<!-- 务必在jquery后插入fuck-line-height.js -->
<script src="https://zhuanfou.com/static/js/fuck-line-height.js"></script>

<style>
div#outer_div {
    width:100%;
    height:100%;
    text-align:center;
    display:block;
}
div#outer_div span {
    display:inline-block;
    vertical-align:middle;
}
</style>

<!-- 在外部元素上要添加fuck-line-height="fuck"才能生效 -->
<div id="outer_div" fuck-line-height="fuck">
    <span>需要放在中部的文字</span>
</div>

这个js前端库就是自动帮你解决了line-height和height保持一致。