使用el-row让文字水平居中且根据textarea拉伸位置不改变

使用el-row让文字水平居中且根据textarea拉伸位置不改变

• el-row是element的分栏布局方式
• 话不多说看代码：

 <el-row :gutter="0" type="flex" align="middle">
    <el-col :span="3">
       <el-card shadow="hover" >
           ******
       </el-card>
       </el-col>
       <el-col :span="9">
         <el-input style="width:100%" v-model="****.*****" readonly placeholder="****" class="inputstyle"></el-input>
       </el-col>
</el-row>

添加 **type=“flex” align=“middle”**两行代码效果图：

所以我们不能使用这种方法、正确的方式是。直接上代码：

/*使用felx布局来解决这个问题*/
<el-row :gutter="0" >
  <el-col :span="3">
    <el-card shadow="hover" class="cardstyle_col">
      ****
    </el-card>
    </el-col>
    <el-col :span="21">
      <el-input type="textarea" v-model="****.****" clearable readonly class="textareastyle" placeholder="placeholder"></el-input>
    </el-col>
</el-row>

/*样式*/
.textareastyle {
        display: inline-block; /*行内元素使用flex布局*/
        width: 100%;
        line-height: 35px;
        font-size: 12px;
        resize: none;
    }
.cardstyle_col {
        text-align: center;
        background-color: #F8F8F9;
        height: 100%;
        border-radius: 4px;
        line-height: 100%;
        width: 100%;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

然后我们就解决了这个水平居中的问题且样式也好看、直接上图

这样就可以随着textarea去变动、不管你怎么拉伸都没事、
学会了吗.