使用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去变动、不管你怎么拉伸都没事、
学会了吗.