vue|elementUI|常见问题|样式不居中

很多新手前端基本都会遇到的问题，在同一个，<el-form-item>中放两个框，<el-input>和<img>验证码，框框的高度一致，但是样式无法对齐，如图所示

image.png

一，先上解决方案：

1. /deep/
   在对应的标签选择器前加上 /deep/

<style lang="scss" scoped>
.a{
   /deep/ .b { 
      /* ... */ 
   }
} 
</style>

2. ::v-deep
   在对应的标签选择器前加上::v-deep

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      /* ... */ 
   }
} 
</style>

3. >>>
   在对应的标签选择器前加上 >>>

<style lang="css" scoped>
.a >>> .b { 
   /* ... */ 
}
</style>

二，产生的原因

<el-form-item>是饿了么的自定义标签，它本身是的实现上是用<div盒子>包裹的，自动生成了类选择器el-form-item__content，所以 下面这段代码就会无法产生期望中的效果，这是一种常见的样式污染问题。

 .el-form-item__content {
  display: flex;
  align-items: center;
}