开启AdminJS成长之旅！这是我参与「AdminJS · 2 月更文挑战」的第 1 天，点击查看活动详情
前言
作为一名新晋的职场前端半吊子，我近期在努力学习CSS，以早日摆脱这个尴尬的身份，而当我见到 inline-block 的时候，被“她”墙头草的性格深深折服了！究竟事发如何，佬爷且向下看。
案例还原
看！这是一个十分普通却又平常的父子div嵌套。
<div class="father">
<div class="baby">
大威天龙
</div>
</div>
父元素类名叫 father，子元素叫 baby。
为父元素加上点魔法样式，让它变得更普通——
.father {
width: 200px;
height: 200px;
margin: 0 auto;
background: #bfa;
text-align: center;
}
跟着B站某老师学的CSS基础，也喜欢给没想好的元素加上 #bfa 的背景色，那么这样它就变成了一个方方正正的绿方块！
<-- 就像这样
baby 的文字很自然的听从 father 的安排——text-align: center; 即居中显示了内部文字。
接下来，我们雨露均沾，给 baby 也加点东西：
.baby {
color: #F00;
display: inline-block;
text-align: left;
}
现在的效果是这样：
等等？为什么 baby 没有按照自己的设置，text-align: left; 居左显示文字呢？text-align没生效？免死金牌到你这都不免死了？
继续添加文字，这时会发现，随着文字变多（超过1行），baby 竟然居左显示了！
为什么会出现这种情况？究竟是元素的扭曲还是标准的沦丧。
案例解析
其实这个问题很简单，只不过是我的半吊子神功又发挥本能了。万恶之源，罪魁祸首实际上就是 inline-block。
接下来，我为 baby 添加上和父元素十分和谐的背景色。
哎！所有问题都解决了。
其实，baby 的 text-align 生效了，但是由于 inline-block 的特性，导致居左效果根本看不出来（一个 20px 的元素在 20px 的父元素里居左，那和没有这个设置有什么区别？！）
而 baby 整体还是按照父元素设置的居中正常显示，因此我们看到的就是居中效果。
所以，当文字超过一行了，baby 的高度就会被撑开，这时，内部的居左效果就可以很清晰的被我们看到！
应用与总结
并非免死金牌不免死了，而是因为现在在宰相府（被 baby 的 inline-block 的假象蒙蔽了）inline-block 也是因为具有 inline 的特性，可以实现整体居中的效果。
因此，该特性便可应用在单行居中，多行居左显示的场景。
我也要去其它场景中继续学习啦，祝大家新春快乐哈~
注：新手小白请谅解。