为什么设置vertical-align:middle实现垂直居中无效啊？

Question

<div class="clearfix">
   <table class="fl">内容...</table>
   <span class="fr">内容...</span>
</div>

图中fl和fr是左右浮动的意思，clearfix是清除浮动的类（使用的是很普通的float和伪元素，不贴代码了）

最外层的div设置了display: table-cell;vertical-align:middle;，table子元素垂直居中了，span却没有（换成div或者其他元素也不行）。。。查了一下，貌似对于浮动元素会自动设置成display: block。。但是table还是生效了啊

// div的css
display: table-cell;
vertical-align: middle;

使用display: table-cell和vertical-align:middle是一种垂直居中的方法（不是vertical-align不能设置在div上）

Answer 1

div中的内容不是垂直居中的吗？

如果你是想table和span垂直居中对齐：

首先，vertical-align作用于自身，不作用于后辈元素，也不可继承。所以在div上设置vertical-align是不正确的，当然也没什么额外影响，你可以去掉试试。需要table和span居中对齐，需要在这两个上都设置vertical-align。

其次，vertical-align要其效果是有条件的，必须是inline格式化上下文才行。而在此例中，由于table和span都被应用了浮动float，创建了BFC，因此vertical-align在table和span上不起效果。

Answer 2

因为 vertical-align 仅在 inline / inline-block 生效

Answer 3

官方定义：

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

你给div设置vertical-align 设置的是div本身 span和table本身有自己的默认样式 并不会继承父元素