el-tabs 标签中多行文字+图片居中
用父元素display:table,子元素display: table-cell;
垂直居中: vertical-align: middle
(子元素中设置+需要设置height)
水平居中:text-align: center;(圈内图片)
<el-tab-pane>
<span slot="label" style="display: table">
<div style="display: table-cell; vertical-align: middle">
<div class="bg-circle">
<img
src="../assets/img/about/cmif.png"
style="width: 50px;"
/>
</div>
</div>
<div class="title_host">
<p>China Machinery Industry</p>
<p> Federation (CMIF)</p>
</div>
</span>
...
...
</el-tab-pane>
::v-deep.el-tabs--left .el-tabs__header.is-left {
margin-right: 1px;
}
::v-deep.el-tabs__nav-scroll {
background: rgb(240, 246, 255);
}
::v-deep .el-tabs__nav-scroll .is-active {
/* padding-left: 12px; */
.title_host p {
color: white;
}
background: linear-gradient(
30deg,
rgb(237, 195, 79),
rgb(237, 195, 79),
rgb(84, 180, 239),
rgb(84, 180, 239)
);
}
::v-deep .el-tabs__item {
height: 150px;
width: 500px;
border: 1px solid #ebeef5;
padding-left: 50px;
}
::v-deep .el-tabs__active-bar {
background-color: transparent;
}
::v-deep .el-tabs__content {
padding-left: -100px;
height: 450px;
border-radius: 0.5%;
border-left: 2px solid #ebeef5;
background: linear-gradient(30deg, #54b4ef, #54b4ef, #edc450, #edc450);
}
::v-deep .el-tab-pane {
margin: 50px 35px 0px 35px;
h2 {
color: #ffffff;
font-size: 24px;
font-family: SourceHanSansCN-Regular;
height: 50px;
}
p {
color: #ffffff;
font-size: 16px;
font-family: SourceHanSansCN-Regular;
}
}
.title_host {
display: table-cell;
vertical-align: middle;
height: 150px;
p {
font-size: 20px;
font-family: SourceHanSansCN-Bold;
color: rgb(48, 119, 182);
width: 120px;
font-weight: bold;
// line-height: 30px;
}
}
.bg-circle {
width: 70px;
height: 70px;
line-height: 60px;
text-align: center;
border-radius: 50%;
background: white;
border: 2px solid #ebeef5;
margin: auto 20px auto 0px;
}