<div class="parent">
<span class="child">测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例</span>
</div>
<style>
.parent {
height: 100px;
background-color: aqua;
text-align: center; /*水平居中*/
line-height: 100px; /* 通过 line-height 设置幽灵节点的基线 */
}
.child {
color: #fff;
background-color: blueviolet;
vertical-align: middle;
line-height: normal; /* 块级元素时需要加 */
display: inline-block; /* 重点,要把 line-height 设置成 normal, 要不然会继承100 */
}
</style>
设置幽灵节点的高度以及幽灵节点的基线(通过line-height),来设置幽灵节点的x-height,是span的中线与幽灵节点的中线对齐,同样也可以使vertical-align:middle;居中
请问是哪里出错了呢?请赐教,不胜感激。
我觉得是可以的,然后我复制到codepen看了下,真的是可以的

又新建了html文件,然后挂了。。一想,肯定有古怪,把文档结构补全,然后就又行了。