el-tabs 标签中多行文字+图片居中

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;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值