关于css行内元素垂直居中的问题

Question

下图div是一个line boxes，里面有两个inline-boxes，分别是input的inline-boxes和文字的匿名inline-boxes，如果让他们俩垂直居中，之间好像牵扯了Line-height vertical-align IFC这些东西，虽然一直知道怎么垂直居中，但是原理一直不清楚，据说是css中最复杂的东西，所以想深入了解下，有好的文章可以推荐下吗？谢谢了

Answer 1

看看这个是否对你有帮助 走你

Answer 2

可以参考我的个人博客，里面介绍了常用的四种常用水平垂直居中方式链接描述

Answer 3

https://segmentfault.com/a/11...

看看这个会不会有灵感

Answer 4

使用display：table, 利用td的特性

Answer 5

给checkbox加vertical-align:middle试下链接描述

Answer 6

vertial-align只适用于table。一般性方案用flex+align-items.

<div>
    <span><input type="checkbox" /></span>
    <span>This is a test line </span>
</div>

<style>
    div {
        display: flex;
        height: 200px;
    }
    span {
        display: flex;
        align-items: center;
    }
</style>

Answer 7

height，line-height结合使用